feat: update document editor styles (#180)

codex-team · May 12, 2022 · ff86770 · ff86770
1 parent f75401d
commit ff86770
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 32 deletions.
diff --git a/src/backend/views/pages/form.twig b/src/backend/views/pages/form.twig
@@ -13,14 +13,14 @@
       }
     </textarea>
     <header class="writing-header">
-      <span class="writing-header__left">
-        <span>
-        New Page at the
+      <div class="writing-header__left">
         {% set currentPageId = 0 %}
         {% if page is not empty %}
           {% set currentPageId = page._id %}
         {% endif %}
-          <select name="parent">
+        <div class="select-wrapper">
+          <label for="parent">New Page at the</label>
+          <select id="parent" name="parent">
             <option value="0">Root</option>
             {% for _page in pagesAvailable %}
               {% if _page._id != currentPageId %}
@@ -34,24 +34,25 @@
               {% endif %}
             {% endfor %}
           </select>
-        </span>
-
+        </div>
         {% if parentsChildrenOrdered is not empty %}
-          <span>
-            Put Above
-            <select name="above">
+          <div class="select-wrapper">
+            <label for="above">Put Above</label>
+            <select id="above" name="above">
               <option value="0">—</option>
               {% for _page in parentsChildrenOrdered %}
                 <option value="{{ _page._id }}">{{ _page.title }}</option>
               {% endfor %}
             </select>
-          </span>
+          </div>
         {% endif %}
-      </span>
-
-      {% if page is not empty %}
-        <p><input type="text" class="uri-input" name="uri-input" placeholder="URI (Optional)" value="{{ page.uri }}"></p>
-      {% endif %}
+        {% if page is not empty %}
+          <div class="uri-input-wrapper">
+            <label for="uri-input">Alias</label>
+            <input type="text" id="uri-input" class="uri-input" name="uri-input" placeholder="URI (Optional)" value="{{ page.uri }}">
+          </div>
+        {% endif %}
+      </div>
     </header>
     <div class="writing-editor">
       <div id="editorjs"></div>

diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss
@@ -1,5 +1,4 @@
 .writing-header {
-  display: flex;
   position: sticky;
   top: 0;
   padding: 15px 0;
@@ -17,16 +16,41 @@
 
   &__left {
     margin: auto 0;
+    display: flex;
     color: var(--color-text-second);
+    gap: 10px;
 
-    & span {
-      margin-right: 10px;
+    @media(--mobile) {
+      flex-flow: column;
+    }
+
+    & > * {
+      flex: 1 1 33.3%;
+    }
+
+    label {
+      display: block;
+      margin-bottom: 6px;
     }
-  }
 
-  select {
-    max-width: 100px;
-    vertical-align: bottom;
+    select, input {
+      position: relative;
+      padding: 10px 16px;
+      width: 100%;
+      border: none;
+      border-radius: 8px;
+      background-color: #F3F6F8;
+      box-sizing: border-box;
+      appearance: none;
+    }
+
+    select {
+      padding-right: 36px;
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+      background-repeat: no-repeat;
+      background-position: right 16px center;
+      background-size: 16px 12px;
+    }
   }
 }
 
@@ -37,16 +61,6 @@
   }
 }
 
-.uri-input {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 3px;
-  border: 1px solid rgba(201, 201, 204, 0.48);
-  box-shadow: inset 0 1px 2px 0 rgba(35, 44, 72, 0.06);
-  outline: none;
-}
-
 .writing-editor {
   font-size: 15px;
   line-height: 1.6;