Merge pull request #1278 from ubilabs/wizard-adjustments

refactor: adjust styles for embed, fix tags tooltip positioning
ubilabs · Aug 14, 2023 · f35b61a · f35b61a
2 parents 5df370b + 1254cb6
commit f35b61a
Show file tree

Hide file tree

Showing 24 changed files with 166 additions and 102 deletions.
diff --git a/i18n/de.json b/i18n/de.json
@@ -87,6 +87,8 @@
   "legend": "Legende",
   "header": "Kopfzeile",
   "back_link": "Zurück Link",
+  "embedLanguage": "Sprache",
+  "detectLanguage": "Automatisch erkennen",
   "filter_tags": "Filter Tags",
   "story_header": "Kopfzeile",
   "story_back_link": "Zurück Link",

diff --git a/i18n/en.json b/i18n/en.json
@@ -91,6 +91,8 @@
   "story_header": "Story Header",
   "story_back_link": "Back Link",
   "stories_menu": "Stories Menu",
+  "embedLanguage": "Language",
+  "detectLanguage": "Detect automatically",
   "tags.sea-surface-temperature": "Sea Surface Temperature",
   "tags.sea-ice": "Sea Ice",
   "tags.ocean-colour": "Ocean Colour",

diff --git a/i18n/es.json b/i18n/es.json
@@ -91,6 +91,8 @@
   "story_header": "Cabecera de la historia",
   "story_back_link": "Botón atrás",
   "stories_menu": "Menú de historias",
+  "embedLanguage": "Idioma",
+  "detectLanguage": "Detectar automáticamente",
   "tags.sea-surface-temperature": "Temperatura de la superficie del mar",
   "tags.sea-ice": "Hielo marino",
   "tags.ocean-colour": "Color del océano",

diff --git a/i18n/fr.json b/i18n/fr.json
@@ -91,6 +91,8 @@
   "story_header": "Retour bouton",
   "story_back_link": "Bouton de retour",
   "stories_menu": "Menu des histoires",
+  "embedLanguage": "Langue",
+  "detectLanguage": "Détection automatique",
   "tags.sea-surface-temperature": "Température de surface de la mer",
   "tags.sea-ice": "Glace de mer",
   "tags.ocean-colour": "Couleur des océans",

diff --git a/i18n/nl.json b/i18n/nl.json
@@ -91,6 +91,8 @@
   "story_header": "Koptekst verhaal",
   "story_back_link": "Terugknop",
   "stories_menu": "Verhalenmenu",
+  "embedLanguage": "Taal",
+  "detectLanguage": "Automatisch detecteren",
   "tags.sea-surface-temperature": "Zeewateroppervlaktetemperatuur",
   "tags.sea-ice": "Zee-ijs",
   "tags.ocean-colour": "Oceaankleur",

diff --git a/src/scripts/components/layers/data-set-info/data-set-info.module.styl b/src/scripts/components/layers/data-set-info/data-set-info.module.styl
@@ -32,11 +32,12 @@
   justify-content: center
   pointer-events: all
 
-@media screen and (max-width: 480px)
+@media screen and (max-width: 768px)
   .dataSetInfo
     top: 10%
     bottom: initial
 
+@media screen and (max-width: 480px)
   .dataSetContent
     align-items: flex-start
     padding: emCalc(10px)

diff --git a/src/scripts/components/layers/time-slider/time-slider.module.styl b/src/scripts/components/layers/time-slider/time-slider.module.styl
@@ -131,9 +131,10 @@ compareThumb()
   text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33)
   font-size: 0.8em
 
-@media screen and (max-width: 480px)
+@media screen and (max-width: 768px)
   .timeSlider
     padding-bottom: emCalc(100px)
 
+@media screen and (max-width: 480px)
   .container
     min-width: 300px
diff --git a/src/scripts/components/main/button/button.module.styl b/src/scripts/components/main/button/button.module.styl
@@ -30,7 +30,7 @@
   svg
     fill: $textDefault
 
-@media screen and (max-width: 480px)
+@media screen and (max-width: 768px)
   .hideLabel
     span
       display: none
diff --git a/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl b/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl
@@ -1,17 +1,20 @@
 @require '../../../../variables.styl'
 
-.checkboxList
+.checkboxListContainer, .checkBoxList
   display: flex
   flex-direction: column
-  gap: emCalc(16px)
+  gap: emCalc(8px)
 
-.checkboxList.app
+.checkboxListContainer.app
   grid-area: 1 / 1 / 4 / 2
 
-.checkboxList.disabledEmbed
+.checkboxListContainer.disabledEmbed
   opacity: 0.5
   pointer-events: none
 
+.checkBoxList
+  gap: emCalc(16px)
+
 .listTitle
   margin: 0
   font-weight: 700

diff --git a/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.tsx b/src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.tsx
@@ -4,6 +4,8 @@ import {useLocation} from 'react-router-dom';
 import cx from 'classnames';
 
 import {ElementOptions, UiEmbedElement} from '../../../types/embed-elements';
+import {useStoryParams} from '../../../hooks/use-story-params';
+import useIsStoriesPath from '../../../hooks/use-is-stories-path';
 
 import styles from './embed-checkbox-list.module.styl';
 
@@ -19,18 +21,20 @@ const EmbedCheckboxList: FunctionComponent<Props> = ({
   handleChange
 }) => {
   const {pathname} = useLocation();
+  const {currentStoryId} = useStoryParams();
+  const isStoriesPath = useIsStoriesPath();
   const isDataPath = pathname === '/';
-  const isStoriesPath = pathname === '/stories';
-  const isStoryPath = pathname.startsWith('/stories/story-');
   const isStoriesList = elementList.title === 'stories';
   const isStory = elementList.title === 'story';
+  const isApp = elementList.title === 'app';
+
   const disabledEmbed =
     (isDataPath && (isStoriesList || isStory)) ||
-    (isStoriesPath && !isStoriesList) ||
-    (isStoryPath && !isStory);
+    (isStoriesPath && (isStory || isApp)) ||
+    (currentStoryId && (isStoriesList || isApp));
 
   const checkboxListClasses = cx(
-    styles.checkboxList,
+    styles.checkboxListContainer,
     disabledEmbed && styles.disabledEmbed,
     styles[elementList.title]
   );
@@ -40,26 +44,28 @@ const EmbedCheckboxList: FunctionComponent<Props> = ({
       <h2 className={styles.listTitle}>
         <FormattedMessage id={elementList.title} />
       </h2>
-      {elementList.elements.map(element => (
-        <div className={styles.checkboxListItem} key={element}>
-          <input
-            type="checkbox"
-            name={element}
-            checked={elementsChecked[element] === true}
-            onChange={event => {
-              const checked = event.target.checked;
+      <div className={styles.checkBoxList}>
+        {elementList.elements.map(element => (
+          <div className={styles.checkboxListItem} key={element}>
+            <input
+              type="checkbox"
+              name={element}
+              checked={elementsChecked[element] === true}
+              onChange={event => {
+                const checked = event.target.checked;
 
-              handleChange({
-                ...elementsChecked,
-                [element]: checked
-              });
-            }}
-          />
-          <label htmlFor={element}>
-            <FormattedMessage id={element} />
-          </label>
-        </div>
-      ))}
+                handleChange({
+                  ...elementsChecked,
+                  [element]: checked
+                });
+              }}
+            />
+            <label htmlFor={element}>
+              <FormattedMessage id={element} />
+            </label>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };

diff --git a/src/scripts/components/main/embed-result/embed-result.module.styl b/src/scripts/components/main/embed-result/embed-result.module.styl
@@ -10,7 +10,7 @@
   flex-direction: column
 
 .resultTitle
-  margin-top: 0
+  margin: 0 0 emCalc(8px)
   font-weight: 700
   font-size: emCalc(16px)
   font-family: Arial
@@ -36,7 +36,7 @@
 .copyButton
   flex-direction: row-reverse
   align-self: flex-start
-  margin: emCalc(16px)
+  margin: emCalc(8px) emCalc(16px)
   color: $main
 
   > svg

diff --git a/src/scripts/components/main/embed-settings/embed-settings.module.styl b/src/scripts/components/main/embed-settings/embed-settings.module.styl
@@ -2,6 +2,7 @@
 
 .settings
   display: grid
+  height: 100%
   column-gap: emCalc(24px)
   grid-template-columns: repeat(2, auto)
   grid-template-rows: repeat(4, auto)
@@ -29,7 +30,12 @@
     height: 44px
     border-radius: 4px
     background: $black
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 width%3D%22292.4%22 height%3D%22292.4%22%3E%3Cpath fill%3D%22%23ffffff%22 d%3D%22M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E')
+    background-position: right 1rem top 50%
+    background-size: 0.65rem auto
+    background-repeat: no-repeat
     font-size: emCalc(16px)
+    appearance: none
 
 .languageSelect > *
   color: $textDefault

diff --git a/src/scripts/components/main/embed-settings/embed-settings.tsx b/src/scripts/components/main/embed-settings/embed-settings.tsx
@@ -28,7 +28,7 @@ const EmbedSettings: FunctionComponent<Props> = ({
     ))}
     <div className={styles.languageSelect}>
       <label htmlFor="language" className={styles.title}>
-        <FormattedMessage id="language" />
+        <FormattedMessage id="embedLanguage" />
       </label>
       <select
         name="language"
@@ -42,7 +42,9 @@ const EmbedSettings: FunctionComponent<Props> = ({
             lng: selectedLng
           });
         }}>
-        <option value="autoLng">Detect automatically</option>
+        <option value="autoLng">
+          <FormattedMessage id="detectLanguage" />
+        </option>
         {Object.values(Language).map(lng => (
           <option key={lng} value={lng as Language}>
             <FormattedMessage id={`language.${lng}`} />

diff --git a/src/scripts/components/main/embed-wizard/embed-wizard.module.styl b/src/scripts/components/main/embed-wizard/embed-wizard.module.styl
@@ -5,7 +5,8 @@
   justify-content: center
   align-items: center
   overflow: hidden
-  width: 50%
+  max-width: 800px
+  width: 70%
   height: 100%
 
 .contentContainer
@@ -27,8 +28,8 @@
   h1
     font-weight: 700
     font-style: normal
-    font-size: 36px
-    font-family: NotesEsa
+    font-size: emCalc(36px)
+    font-family: NotesEsaBold
     line-height: 36px
 
 .divider

diff --git a/src/scripts/components/main/globe-navigation/globe-navigation.module.styl b/src/scripts/components/main/globe-navigation/globe-navigation.module.styl
@@ -5,6 +5,7 @@
   right: emCalc(22px)
   bottom: emCalc(22px)
   display: flex
+  gap: emCalc(15px)
 
 .globeNavigation > *
   z-index: 1
@@ -16,7 +17,6 @@
     text-shadow: none
 
 .compass
-  margin: 0 emCalc(15px)
   width: 24px
   height: 24px
 
@@ -35,6 +35,5 @@
     stroke: none
 
 .locateMe
-  margin: 0 emCalc(15px)
   width: 22px
   height: 22px
diff --git a/src/scripts/components/main/navigation/navigation.module.styl b/src/scripts/components/main/navigation/navigation.module.styl
@@ -5,6 +5,15 @@
   top: emCalc(22px)
   right: emCalc(22px)
   display: flex
+  gap: emCalc(30px)
+
+.storiesContainer
+  display: flex
+  gap: emCalc(8px)
+
+.tagsContainer
+  position: relative
+  display: flex
 
 .button
   text-shadow: 0px 0px 2px $black
@@ -18,15 +27,6 @@
   svg
     filter: drop-shadow(3px 2px 2px rgba(16, 22, 26, 0.2))
 
-  .button, &:not(:last-child)
-    padding-right: emCalc(30px)
-
-.tagsButton
-  padding-left: emCalc(8px)
-
-  svg
-    filter: drop-shadow(3px 2px 2px rgba(16, 22, 26, 0.2))
-
 .badge
   position: relative
   top: emCalc(2px)
@@ -37,7 +37,6 @@
   background: $main
   color: $textWhite
 
-@media screen and (max-width: 480px)
-  .button
-    &:not(:last-child)
-      padding-right: emCalc(15px)
+@media screen and (max-width: 768px)
+  .navigation
+    gap: emCalc(15px)
diff --git a/src/scripts/components/main/navigation/navigation.tsx b/src/scripts/components/main/navigation/navigation.tsx
@@ -38,25 +38,31 @@ const Navigation: FunctionComponent = () => {
     <React.Fragment>
       <div className={styles.navigation}>
         {stories_menu && (
-          <Button
-            className={styles.button}
-            id="ui-stories"
-            label="stories"
-            link="/stories"
-            icon={StoryIcon}
-            hideLabelOnMobile
-          />
-        )}
-        {selectedTags.length > 0 && (
-          <React.Fragment>
+          <div className={styles.storiesContainer}>
             <Button
-              className={styles.tagsButton}
-              icon={FilterIcon}
-              onClick={() => setShowTags(!showTags)}
+              className={styles.button}
+              id="ui-stories"
+              label="stories"
+              link="/stories"
+              icon={StoryIcon}
+              hideLabelOnMobile
             />
-            <div className={styles.badge} />
-          </React.Fragment>
+            {selectedTags.length > 0 && (
+              <div className={styles.tagsContainer}>
+                <Button
+                  className={styles.tagsButton}
+                  icon={FilterIcon}
+                  onClick={() => setShowTags(!showTags)}
+                />
+                <div className={styles.badge} />
+                {selectedTags.length > 0 && showTags && (
+                  <SelectedTags selectedTags={selectedTags} />
+                )}
+              </div>
+            )}
+          </div>
         )}
+
         {layers_menu && (
           <Button
             className={styles.button}
@@ -96,9 +102,6 @@ const Navigation: FunctionComponent = () => {
           />
         </Overlay>
       )}
-      {selectedTags.length > 0 && showTags && (
-        <SelectedTags selectedTags={selectedTags} />
-      )}
     </React.Fragment>
   );
 };