Skip to content

Create a reusable custom variables file and use it for mismatch finder #794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chukarave merged 4 commits into from
Jan 17, 2024
Merged

Create a reusable custom variables file and use it for mismatch finder #794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
64c0931
add custom variables file and replace app.css vars
chukarave Dec 19, 2023
7786b5b
add custon variables css file and adjust path
chukarave Dec 21, 2023
3b55aff
replace variables in components and pages
chukarave Dec 21, 2023
7285174
fix incorrect/redundant values
chukarave Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions resources/css/custom-variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
:root {
/* spacing */
--dimension-spacing-none: 0em;
--dimension-spacing-xxsmall: 0.125em;
--dimension-spacing-xsmall: 0.25em;
--dimension-spacing-small: 0.5em;
--dimension-spacing-medium: 0.75em;
--dimension-spacing-large: 1em;
--dimension-spacing-xlarge: 1.5em;
--dimension-spacing-xxlarge: 2em;

/*layout */
--dimension-layout-xxsmall: 0.5rem;
--dimension-layout-xsmall: 1rem;
--dimension-layout-small: 1.5rem;
--dimension-layout-medium: 2rem;
--dimension-layout-large: 2.5rem;
}
6 changes: 4 additions & 2 deletions resources/js/Components/AuthWidget.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,17 @@ defineProps<{ user: User | null}>();
<style lang="scss">
@import '~@wmde/wikit-tokens/dist/_variables.scss';
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';
@import '../../css/custom-variables.css';

.auth-widget {
display: flex;
color: $color-base-50;
justify-content: space-between;
gap: $dimension-spacing-xlarge;
gap: var(--dimension-spacing-xlarge);
align-items: center;

.icon-user {
margin-inline-end: $dimension-spacing-small;
margin-inline-end: var(--dimension-spacing-small);
vertical-align: middle;
}

Expand Down
13 changes: 7 additions & 6 deletions resources/js/Components/WikidataToolFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,18 +53,19 @@ withDefaults(defineProps<{

<style lang="scss">
@import '~@wmde/wikit-tokens/dist/_variables.scss';
@import '../../css/custom-variables.css';

.footer-container {
background-color: $color-base-90;

& > footer {
margin: auto;
padding: $dimension-layout-xsmall;
padding: var(--dimension-layout-xsmall);
display: flex;
flex-direction: column;

.h5 {
margin: 0 0 $dimension-layout-xsmall 0;
margin: 0 0 var(--dimension-layout-xsmall) 0;
font-size: $font-size-style-body-s;
}

Expand All @@ -73,7 +74,7 @@ withDefaults(defineProps<{
}

section + section {
margin-block-start: $dimension-layout-medium;
margin-block-start: var(--dimension-layout-medium);
}

p {
Expand All @@ -82,15 +83,15 @@ withDefaults(defineProps<{
}

p + p {
margin-block-start: $dimension-layout-xxsmall;
margin-block-start: var(--dimension-layout-xxsmall);
}

@media (min-width: $width-breakpoint-tablet) {
flex-direction: row;
padding: $dimension-layout-small;
padding: var(--dimension-layout-small);

section {
margin-inline-end: $dimension-layout-large;
margin-inline-end: var(--dimension-layout-large);
}

section + section {
Expand Down
7 changes: 4 additions & 3 deletions resources/js/Pages/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,7 @@ function showRandom(): void{

<style lang="scss">
@import '~@wmde/wikit-tokens/dist/_variables.scss';
@import '../../css/custom-variables.css';

#querying-section .heading {
display: flex;
Expand Down Expand Up @@ -184,14 +185,14 @@ function showRandom(): void{
/**
* Layout
*/
padding: $dimension-spacing-large;
margin: $dimension-layout-xsmall 0;
padding: var(--dimension-spacing-large);
margin: var(--dimension-layout-xsmall) 0;

// Any direct decendent of this form that has a predecessor element will
// get a top margin, this creates the even gutter between elements or "stack"
// See https://every-layout.dev/layouts/stack/#the-solution
& > * + * {
margin-top: $dimension-spacing-large;
margin-top: var(--dimension-spacing-large);
}

.form-buttons {
Expand Down
11 changes: 6 additions & 5 deletions resources/js/Pages/Results.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -340,12 +340,13 @@ function _handleConfirmation(){

<style lang="scss">
@import '~@wmde/wikit-tokens/dist/_variables.scss';
@import '../../css/custom-variables.css';

.back-button {
// to match the first heading on the home page
margin-top: $dimension-layout-xsmall;
margin-top: var(--dimension-layout-xsmall);
// to avoid visual grouping with .description-section
margin-bottom: $dimension-layout-xsmall;
margin-bottom: var(--dimension-layout-xsmall);
}

h2 {
Expand Down Expand Up @@ -375,15 +376,15 @@ h2 {
}
}
.mismatches-form-footer {
margin-top: $dimension-layout-xsmall;
margin-top: var(--dimension-layout-xsmall);
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
gap: $dimension-layout-xsmall;
gap: var(--dimension-layout-xsmall);
// calculate the footer height to reserve space for
// messages with two lines (1.5 line height plus padding)
min-height: calc(2*1.5em + 2*$dimension-spacing-large);
min-height: calc(2*var(--dimension-spacing-xlarge) + 2*var(--dimension-spacing-large));

.form-success-message {
max-width: 705px;
Expand Down
33 changes: 17 additions & 16 deletions resources/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import '~wikit-dist/wikit-vue-components-vue3compat.css';
@import "@wikimedia/codex/dist/codex.style.css";
@import "@wikimedia/codex-design-tokens/theme-wikimedia-ui";
@import '../css/custom-variables.css';
@import './link.scss';
@import './_typography.scss';

Expand All @@ -21,49 +22,49 @@ body {
*/
main {
max-width: 1090px;
padding: 0 1rem;
padding: 0 var(--dimension-layout-xsmall);
margin: 0 auto;

& > header {
display: flex;
justify-content: space-between;
margin: 1.500rem 0;
margin: var(--dimension-layout-small) 0;
}

@media(min-width: $min-width-breakpoint-tablet){
padding: 0 1.500rem;
padding: 0 var(--dimension-layout-small);
}
}

section {
margin-bottom: 2.500rem;
margin-bottom: var(--dimension-layout-large);
}

h1, .h1 {
@include heading-1;

margin: 1rem 0;
margin: var(--dimension-layout-xsmall) 0;

@media (min-width: $min-width-breakpoint-tablet) {
margin: 1rem 0;
margin: var(--dimension-layout-xsmall) 0;
}
}

h4, .h4 {
margin: 0.500rem 0;
margin: var(--dimension-layout-xxsmall) 0;
@include heading-4;

@media(min-width: $min-width-breakpoint-tablet){
margin: 1rem 0;
margin: var(--dimension-layout-xsmall) 0;
}
}

h5, .h5 {
margin: 0.500rem 0;
margin: var(--dimension-layout-xxsmall) 0;
@include heading-5;

@media(min-width: $min-width-breakpoint-tablet){
margin: 1rem 0;
margin: var(--dimension-layout-xsmall) 0;
}
}

Expand Down Expand Up @@ -100,7 +101,7 @@ li {

// this ensures that there will be a space if there is more than one message
#message-section .cdx-message:not(:nth-child(1)) {
margin-top: 1rem;
margin-top: var(--dimension-layout-xsmall);
}

/**
Expand All @@ -121,16 +122,16 @@ li {
display: flex;

.username {
margin-inline-end: 1.500em;
margin-inline-end: var(--dimension-spacing-xlarge);
}

.icon-user {
margin-inline-end: 0.500em;
margin-inline-end: var(--dimension-spacing-small);
vertical-align: middle;
}

@media (max-width: $max-width-breakpoint-mobile) {
margin-bottom: 1rem;
margin-bottom: var(--dimension-layout-xsmall);
}
}
}
Expand Down Expand Up @@ -324,7 +325,7 @@ dl.import-meta .download-csv {
}

&-icon {
margin-inline-end: 0.500em;
margin-inline-end: var(--dimension-spacing-small);
vertical-align: middle;
}
}
Expand Down Expand Up @@ -384,7 +385,7 @@ dl.import-meta .download-csv {
}

.button-group {
margin-block-end: 1em;
margin-block-end: var(--dimension-spacing-large);
}

.button {
Expand Down
21 changes: 8 additions & 13 deletions resources/sass/noscript.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,42 @@
@import '~@wikimedia/codex/dist/codex.style.css';
@import '~@wikimedia/codex/dist/codex.style-rtl.css';
@import '~@wikimedia/codex-design-tokens/theme-wikimedia-ui.scss';

$spacing-layout-50: 0.5rem;
$spacing-layout-100: 1rem;
$spacing-layout-150: 1.5rem;
$spacing-layout-200: 2rem;
$spacing-layout-900: 9rem;
@import '../css/custom-variables.css';

main {
font-size: $font-size-medium;
line-height: $line-height-medium;
font-family: $font-family-system-sans;
font-weight: $font-weight-normal;
color: $color-base;
padding: 10vw $spacing-layout-150 $spacing-layout-150 $spacing-layout-150;
padding: 10vw var(----dimension-layout-small) var(----dimension-layout-small) var(----dimension-layout-small);
max-width: 680px;

@media (min-width: $min-width-breakpoint-tablet) {
padding: 10vw $spacing-layout-200 $spacing-layout-200 $spacing-layout-200;
padding: 10vw var(--dimension-layout-medium) var(--dimension-layout-medium) var(--dimension-layout-medium);
}
@media (min-width: $min-width-breakpoint-desktop) {
padding: $spacing-layout-900 0 $spacing-layout-150 0;
padding: 9rem 0 var(----dimension-layout-small) 0;
}
p {
margin-block-end: 0;
}
.h5 {
margin: $spacing-layout-150 0;
margin: var(----dimension-layout-small) 0;
font-size: $font-size-medium;
line-height: $line-height-xxx-small;
font-family: $font-family-system-sans;
font-weight: $font-weight-bold;
color: $color-emphasized;
}
.message-wrapper {
padding: $spacing-layout-50 0;
padding: var(--dimension-layout-xxsmall) 0;
@media (min-width: $min-width-breakpoint-tablet) {
padding: $spacing-layout-100 0;
padding: var(----dimension-layout-xsmall) 0;
}
}
.description {
padding-block-end: $spacing-layout-150;
padding-block-end: var(----dimension-layout-small);
}
header {
.logo-link {
Expand Down