0001-core-refactorisation-of-wcs-steps-component-36765.patch

Thomas Jund (congés, retour le 29/04), 18 novembre 2019 15:08

Voir les différences: en ligne côte à côte

Subject: [PATCH] core: refactorisation of wcs steps component (#36765)

 static/includes/_wcs.scss               |   3 +-
 static/includes/wcs/_bulk.scss          |  97 +-----
 static/includes/wcs/_steps.scss         | 431 ++++++++++++++++++++++++
 templates/theme.html                    |   2 +-
 templates/wcs/front/formdata_steps.html |  30 ++
 5 files changed, 465 insertions(+), 98 deletions(-)
 create mode 100644 static/includes/wcs/_steps.scss
 create mode 100644 templates/wcs/front/formdata_steps.html

static/includes/_wcs.scss
1	1	@import 'grid';
2	2	@import 'wcs/bulk';
3		@import 'wcs/nearby-form';
	3	@import 'wcs/steps';
	4	@import 'wcs/nearby-form';

     // possible values are: left, right, top
     $form-sidebar-position: left !default;
     $responsive-steps: horizontal !default;
     // hide a bunch of elements
     div#droite,
     div#services > h3,
-...
     	margin: 1em;
+    }
     // steps
     div#steps ol {
     	margin: 0;
     	padding: 0;
     	list-style: none;
     	color: #868686;
     	& li {
     		border: 0;
     		border-bottom: 1px solid #ccc;
     		margin-bottom: 1.5em;
     		border-radius: $border-radius;
     		padding: 0.7em;
     		letter-spacing: 1px;
+    	}
     	& li.current {
     		border: 0;
     		background: $title-background;
     		color: $title-color;
     		& span.label {
     			font-weight: bold;
+    		}
+    	}
     	& li span.marker {
     		font-size: 250%;
     		display: block;
+    	}
+    }
     @if ($form-sidebar-position == top) {
     	div#steps ol {
     		text-align: center;
     		li {
     			display: inline-block;
     			min-width: 7rem;
     			max-width: 11rem;
     			vertical-align: top;
     			border-bottom: none;
+    		}
+    	}
+    }
     @if ($responsive-steps == horizontal) {
     @media screen and (max-width: $mobile-limit) {
     	// move #gauche on top and tracking code after steps
     	div#gauche {
     		float: none;
     		width: 100%;
-...
     		h3 { display: inline-block; }
     		.text-tracking-code-short-text { display: none; }
+    	}
     	div#steps {
     		position: static;
     		margin: 0;
     		color: #aaa;
     		white-space: nowrap;
     		overflow: hidden;
     		width: 100%;
     		& ol {
     			list-style: none;
     			padding: 0 0;
     			margin: 0;
     			text-align: left;
     			& li {
     				border: none;
     				display: inline-block;
     				margin: 0;
     				padding: 0 1em 0.7em 0;
     				list-style: none;
     				min-width: auto;
     				border-radius: 0;
     				& span.marker {
     					float: none;
     					display: inline;
     					font-size: 26px;
     					position: static;
     					padding: 2px 9px;
     					font-weight: bold;
     					color: white;
     					text-align: center;
     					background: #ddd;
     					border-radius: $border-radius;
     					border: 1px solid #ddd;
+    				}
+    			}
     			& li.current {
     				background: inherit;
     				color: inherit;
     				& span.label {
     					font-weight: normal;
+    				}
     				& span.marker {
     					background: $title-background;
     					color: $title-color;
     					border-radius: $border-radius;
+    				}
+    			}
     			& li.step-before .label {
     				display: none;
+    			}
+    		}
+    	}
+    }
     }  // @endif ($responsive-steps == horizontal)
     @media screen and (max-width: $mobile-limit) {
     	div#gauche + div#rub_service,

     /*
      *	WCS Steps
+     *
      *	Affiche les étapes/pages d'un formulaire
+     *
      *	Template : wcs/front/formdata_steps.html
+     *
      *	$form-sidebar-position define Steps orientation
+     *
      */
     //
     //	 Config
     //
     // Steps Bloc
     $wcs-steps-background: transparent !default;
     $wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik
     // Step
     $wcs-step-color: #868686 !default; // color for default marker & label
     $wcs-step-current-color: $primary-color !default;
     $wcs-step-background: transparent !default;
     $wcs-step-current-background: $wcs-step-background !default;
     $wcs-step-border-bottom: 1px solid $wcs-step-color !default;
     $wcs-step-current-border-bottom: 3px solid $wcs-step-current-color !default;
     @if ($wcs-step-border-bottom == none) {
     	$wcs-step-current-border-bottom: none;
+    }
     // Step option
     $wsc-step-before-piled: false !default;
     // marker
     $wcs-step-marker-color: $wcs-step-color !default;
     $wcs-step-current-marker-color: $wcs-step-current-color !default;
     $wcs-step-marker-background: $wcs-step-background !default;
     $wcs-step-current-marker-background: $wcs-step-current-background !default;
     // marker options
     $wcs-step-marker-size: 2.1em !default;
     $wcs-step-current-marker-enlarge: 1 !default;
     $wcs-step-marker-type: square !default; // square || tied || disc || disc tied
     $wcs-step-marker-tie-color: $wcs-step-color !default;
     $wcs-step-marker-tie-width: 5px !default;
     $wcs-step-marker-background-type: solid !default;
     // Label
     $wcs-step-current-label-color: $wcs-step-current-color !default;
     // Breakpoints between small & horizontal layout
     $bq-max--wcs-steps-small-layout: $very-small-limit !default;
     // UTILS for custom code
     // media queries between small & horizontal layout
     $mq-max--wcs-steps-small-layout: "max-width: #{$bq-max--wcs-steps-small-layout}";
     $mq-min--wcs-steps-horizontal-layout: "min-width: #{$bq-max--wcs-steps-small-layout+1}";
     //  Desktop Steps orientation sass mixins
     //	Steps orientations depend on media-queries & $form-sidebar-position
     @mixin desktop-horizontal-steps() {
     	@if ($form-sidebar-position == top) {
     		@media (min-width: $mobile-limit + 1) {
     			@content;
+    		}
+    	}
+    }
     @mixin desktop-vertical-steps() {
     	@if ($form-sidebar-position == left or $form-sidebar-position == right) {
     		@media (min-width: $mobile-limit + 1) {
     			@content;
+    		}
+    	}
+    }
     /*
      *	Default Steps (with SQUARES markers)
      */
     /* Steps bloc */
     .wcs-steps {
     	background: $wcs-steps-background;
     	margin-bottom: 0.7rem;
     	border-radius: $border-radius;
     	@if $wcs-steps-background != transparent {
     		padding: $wcs-steps-spacing;
+    	}
     	&--list {
     		margin: 0;
     		padding: 0;
     		list-style: none;
     		color: $wcs-step-color;
+    	}
+    }
     /* Step item */
     .wcs-step {
     	border-radius: $border-radius;
     	background-color: $wcs-step-background;
     	display: flex;
     	&--marker {
     		// marker is abbr tag
     		text-decoration: none;
     		box-sizing: border-box;
     		font-size: 1em;
     		line-height: nomal;
     		text-align: center;
     		display: flex;
     		color: $wcs-step-marker-color;
     		background: $wcs-step-marker-background;
     		border-radius: $border-radius;
     		width: $wcs-step-marker-size;
     		height: $wcs-step-marker-size;
     		flex: 0 0 $wcs-step-marker-size;
     		&-nb {
     			margin: auto;
+    		}
     		&-total {
     			display: none;
+    		}
+    	}
     	&--label {
     		display: block;
     		align-self: center;
     		letter-spacing: 1px;
     		line-height: 1.25;
+    	}
     	// If step is current
     	&.current {
     		font-weight: bold;
     		background: $wcs-step-current-background;
+    	}
     	&.current & {
     		&--marker {
     			background: $wcs-step-current-marker-background;
     			color: $wcs-step-current-marker-color;
     			transform: scale($wcs-step-current-marker-enlarge);
+    		}
     		&--label {
     			color: $wcs-step-current-label-color;
+    		}
+    	}
     	// If step is NOT current
     	&:not(.current) & {
     		&--label {
     			display: none;
+    		}
+    	}
+    }
     /*	Sidebar on TOP, SMALL LAYOUT (very-small viewport)
      *	Display only current step with nb and total in marker
      */
     @media ($mq-max--wcs-steps-small-layout) {
     	.wcs-step {
     		@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
     			padding: $wcs-steps-spacing;
+    		}
     		&--marker {
     			$size: $wcs-step-marker-size + 0.8;
     			width: $size;
     			height: $size;
     			flex: 0 0 auto;
     			align-items: center;
     			justify-content: center;
     			&-nb {
     				margin: 0;
     				transform: translateY(-0.5em);
     				order: 1;
+    			}
     			&-total {
     				display: block;
     				transform: translateY(0.5em);
     				font-size: 0.75em;
     				font-weight: normal;
     				order: 3;
+    			}
     			// add slash
     			&::before {
     				content: "";
     				display: block;
     				flex: 0 0 0.1em;
     				height: 2em;
     				margin: 0 0.1em;
     				background: $wcs-step-current-marker-color;
     				transform: rotate(30deg);
     				order: 2;
+    			}
+    		}
     		&--label {
     			margin-left: $wcs-steps-spacing*2;
+    		}
     		// If step is NOT current
     		&:not(.current) {
     			display: none;
+    		}
+    	}
+    }
     /*	Horizontal Layout
      *	Sidebar on TOP, SMALL and more viewport
      *	Diplay all marker, but only current Label
      */
     @media ($mq-min--wcs-steps-horizontal-layout) {
     	.wcs-steps {
     		&--list {
     			position: relative;
     			display: flex;
     			flex-wrap: wrap;
     			// keep space for label
     			margin-bottom: 2em;
+    		}
+    	}
     	.wcs-step {
     		margin-bottom: $wcs-steps-spacing;
     		margin-right: $wcs-steps-spacing;
     		border-bottom: $wcs-step-border-bottom;
     		&--label {
     			position: absolute;
     			top: 100%;
     			left: 0;
     			width: 100%;
     			padding-bottom: $wcs-steps-spacing;
+    		}
     		&.current {
     			border-bottom: $wcs-step-current-border-bottom;
+    		}
+    	}
+    }
     @include desktop-horizontal-steps() {
     	.wcs-steps {
     		font-size: 1.25em;
+    	}
     	.wcs-step {
     		margin-bottom: $wcs-steps-spacing*2;
     		margin-right: $wcs-steps-spacing*2;
+    	}
+    }
     /*	Vertical Steps
      *	Sidebar on LEFT or RIGHT, DESKTOP only
      *	Display All steps with marker and label. One below the other.
      */
     @include desktop-vertical-steps() {
     	.wcs-steps {
     		font-size: 1.25em;
     		&--list {
     			flex-wrap: nowrap;
     			flex-direction: column;
     			// remove keep space for label
     			padding-bottom: 0;
+    		}
+    	}
     	.wcs-step {
     		@if $wcs-step-border-bottom != none {
     			padding-bottom: $wcs-steps-spacing;
+    		}
     		@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
     			padding: $wcs-steps-spacing;
+    		}
     		margin-right: 0;
     		&--label {
     			position: static;
     			font-size: 0.7em;
     			margin-left: $wcs-steps-spacing;
     			padding-bottom: 0;
+    		}
     		// If step is NOT current
     		&:not(.current) & {
     			&--label {
     				display: block;
+    			}
+    		}
+    	}
+    }
     /*
      *	OPTION marker-background-type: gradient.
      *	Generate automatically a gradient based on background-color
      */
     @if $wcs-step-marker-background-type == gradient {
     	.wcs-step {
     		&--marker {
     			background-attachment: fixed;
     			@media (min-width: $very-small-limit + 1) {
     				background-image: linear-gradient(to right, lighten($wcs-step-marker-background, 10%), darken($wcs-step-marker-background, 10%));
+    			}
     			@include desktop-vertical-steps() {
     				background-image: linear-gradient(to bottom, lighten($wcs-step_marker-background, 10%), darken($wcs-step_marker-background, 10%));
+    			}
+    		}
+    	}
+    }
     /*
      *	OPTION Pile Step Before
      *	Work only for
      *		* horizontal mode: desktop breakpoint and sidebar on left or right
      *		* with background-color on step
      */
     @if ($wsc-step-before-piled ) {
     	@include desktop-vertical-steps() {
     		.wcs-step {
     			&:not(:first-child) {
     				&.step-before,
     				&.current {
     					box-shadow: 0 -4px 4px -4px darken($wcs-step-background, 40%);
+    				}
+    			}
     			&.step-before,
     			&.current {
     				z-index: 1;
     				transition: margin 400ms, box-shadow 400ms;
+    			}
     			&.step-before {
     				margin-bottom: calc( (#{$wcs-step-marker-size} + #{$wcs-steps-spacing * 2}) / 2 * -1);
     				&:hover {
     					margin-bottom: $wcs-steps-spacing;
     					& + .wcs-step {
     						box-shadow: 0 0 0 0 darken($wcs-step-background, 40%);
+    					}
+    				}
+    			}
+    		}
+    	}
+    }
     /*
      *	OPTION marker type DISC
      */
     @if (str-index(quote($wcs-step-marker-type), 'disc')) {
     	.wcs-step {
     		&--marker {
     			border-radius: 50% !important;
     			@media ($mq-max--wcs-steps-small-layout) {
     				$size: $wcs-step-marker-size + 1.4;
     				width: $size;
     				height: $size;
+    			}
+    		}
+    	}
+    }
     /*
      *	OPTION marker type TIED
      */
     @if (str-index(quote($wcs-step-marker-type), 'tied')) {
     	.wcs-step {
     		&:not(:last-child) {
     			@media ($mq-min--wcs-steps-horizontal-layout) {
     				&::after {
     					content: "";
     					display: block;
     					height: $wcs-step-marker-tie-width;
     					flex: 0 0 100%;
     					background-color: $wcs-step-marker-tie-color;
     					margin: auto;
+    				}
+    			}
     			@include desktop-vertical-steps() {
     				position: relative;
     				&::after {
     					height: calc(100% + #{$wcs-steps-spacing});
     					width: $wcs-step-marker-tie-width;
     					position: absolute;
     					z-index: 1;
     					top: $wcs-steps-spacing;
     					left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
     					@if $wcs-step-background != transparent {
     						left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 + #{$wcs-steps-spacing});
+    					}
+    				}
+    			}
+    		}
     		&--marker {
     			position: relative;
     			z-index: 2;
+    		}
+    	}
+    }

        </div>
        <div id="page" {% block page-args %}{% endblock %}>
         <header role="banner">
         <header role="banner" class="site-header">
         <div id="header-wrapper" >
         {% block header-pre %}{% endblock %}
         <div id="header">

     <header id="steps" class="wcs-steps steps-{{page_labels|length}}">
     <ol class="wcs-steps--list">
     {% for page_label in page_labels %}
     {% spaceless %}
     <li {% if forloop.counter != current_page_no %}aria-hidden="true"{% endif %}
     	class="wcs-step
                {% if forloop.first %}first{% endif %}
                {% if forloop.last %}last{% endif %}
                {% if forloop.counter == current_page_no %}current{% endif %}
                {% if forloop.counter < current_page_no %}step-before{% endif %}
                {% if forloop.counter > current_page_no %}step-after{% endif %}" >
     	<abbr
     		{% if forloop.counter == current_page_no %}
     			aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
     			title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
     		{% endif %}
     			class="marker wcs-step--marker">
     		<span class="wcs-step--marker-nb">
     			{{ forloop.counter }}
     		</span>
     		<span class="wcs-step--marker-total">
     			{{ page_labels|length }}
     		</span>
     	</abbr>
     	<span class="label wcs-step--label">{{ page_label }}</span>
     </li>
     {% endspaceless %}
     {% endfor %}
     </ol>
     </header>
+    -

Projet

Général

Profil

Produits Entr'ouvert » Intégrations graphiques Publik

0001-core-refactorisation-of-wcs-steps-component-36765.patch