Merge pull request #1369 from bolt/tweaking-a-bunch-of-small-things

Tweaking a bunch of small things: Margins, paddings, minor UX thingies
bolt · May 17, 2020 · 3a46e32 · 3a46e32
2 parents 36c9aea + c5e9462
commit 3a46e32
Show file tree

Hide file tree

Showing 19 changed files with 94 additions and 55 deletions.
diff --git a/assets/scss/init/_base.scss b/assets/scss/init/_base.scss
@@ -38,12 +38,20 @@ code {
 .card {
   box-shadow: $card-box-shadow;
   background: #fff;
-  border: 1px solid #e8e8e8 !important;
+  border: 1px solid var(--very-light-border) !important;
 
   .card-header {
     font-weight: $font-weight-bold;
     padding: 0.8125rem 1.25rem;
   }
+
+  .card-body {
+    padding: $spacer $spacer*1.5;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
 }
 
 .custom-select {

diff --git a/assets/scss/init/_variables.scss b/assets/scss/init/_variables.scss
@@ -45,6 +45,7 @@ $component-active-bg:                   var(--primary);
 $input-focus-border-color:              var(--primary-400);
 $custom-control-indicator-active-bg:    var(--primary-400);
 $custom-range-thumb-active-bg:          var(--primary-400);
+$form-group-margin-bottom:              2rem;
 
 $input-disabled-bg:                     #f0f3f6;
 $input-disabled-color:                  #777;
@@ -61,6 +62,8 @@ $card-bg:                           var(--foreground);
 $card-box-shadow:                   0 7.5px 15px -5px rgba(0, 0, 0, 0.08);
 
 // Buttons
+$btn-border-radius: 0.2rem;
+$btn-border-radius-sm: 0.2rem;
 $btn-font-weight: 500;
 $btn-font-size-lg: 16px;
 $btn-font-size: 14px;
@@ -98,7 +101,7 @@ $grid-breakpoints: (
 $yiq-contrasted-threshold:  150;
 
 :root {
-  --background: #f3f5f7;
+  --background: #fbfaf9;
   --foreground: #fff;
   --foreground-border: #e8e8e8;
   --primary: #255687;
@@ -116,6 +119,8 @@ $yiq-contrasted-threshold:  150;
   --admin-toolbar: #4c6e91;
   --admin-toolbar-text-light: #fff;
   --admin-toolbar-text-dark: #0c223b;
+  --very-light-border: #f0f0f0;
+  --light-border: #e0e0e0;
 
   @each $bp, $value in $grid-breakpoints {
     --breakpoint-#{$bp}: #{$value};

diff --git a/assets/scss/layout/_admin.scss b/assets/scss/layout/_admin.scss
@@ -157,7 +157,3 @@ body {
 .fab {
   margin-right: 0.25em;
 }
-
-.card-body {
-  padding: $spacer $spacer*1.5;
-}
diff --git a/assets/scss/modules/admin/_header.scss b/assets/scss/modules/admin/_header.scss
@@ -78,11 +78,11 @@
     }
 
     @include media-breakpoint-up(wd) {
-      padding: $spacer*1.25 $spacer*2 1rem $spacer*3; //do not just change this as it's tied to the main grid and other paddings/gutters
+      padding: $spacer*1.25 $spacer*2 0 $spacer*3; //do not just change this as it's tied to the main grid and other paddings/gutters
     }
 
     @include media-breakpoint-up(xw) {
-      padding: $spacer*1.25 $spacer*3 1rem $spacer*4; //do not just change this as it's tied to the main grid and other paddings/gutters
+      padding: $spacer*1.25 $spacer*3 0 $spacer*4; //do not just change this as it's tied to the main grid and other paddings/gutters
     }
   }
 

diff --git a/assets/scss/modules/admin/_sidebar.scss b/assets/scss/modules/admin/_sidebar.scss
@@ -23,8 +23,8 @@
     font-size: $small-font-size;
     letter-spacing: $letter-spacing;
 
-    @include media-breakpoint-up(lg) {
-      margin-top: $spacer*2.25;
+    @include media-breakpoint-up(wd) {
+      margin: $spacer*2.25 0 0 $spacer;
     }
   }
 
@@ -47,6 +47,7 @@
 
     @include media-breakpoint-up(wd) {
       font-size: 0.9375rem;
+      padding: $spacer/1.75 $spacer*1.5 $spacer/1.75 $spacer*2;
     }
 
     &:hover {

diff --git a/assets/scss/modules/editor/_forms.scss b/assets/scss/modules/editor/_forms.scss
@@ -15,20 +15,30 @@
   .form-group {
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.5rem;
   }
 }
 
 .summary-fields {
   padding-left: 1rem;
+
+  li {
+    margin: 0.5rem 0;
+  }
 }
 
 .form-collection {
   border-left: 0.35rem solid #ddd;
   padding-left: 1rem;
+  padding-bottom: 1rem;
 }
 
 .form-set {
   border-left: 0.25rem solid #d8d8d8;
   padding-left: 1rem;
+  padding-bottom: 0.1rem;
+}
+
+.form-control {
+  border: 1px solid var(--light-border);
 }
diff --git a/assets/scss/modules/listing/row/_container.scss b/assets/scss/modules/listing/row/_container.scss
@@ -6,6 +6,8 @@
   position: relative;
   display: flex;
   width: 100%;
+  border: 1px solid var(--very-light-border);
+  margin-bottom: 4px;
 
   &.sortable-ghost {
     opacity: 0.1;

diff --git a/assets/scss/modules/listing/row/row.scss b/assets/scss/modules/listing/row/row.scss
@@ -6,7 +6,6 @@ $checkbox-row-width: 32px;
   box-shadow: $card-box-shadow;
   background: var(--foreground);
   border-radius: $border-radius;
-  margin-bottom: 2px;
   display: flex;
   flex-wrap: wrap;
   position: relative;

diff --git a/templates/_macro/_macro.html.twig b/templates/_macro/_macro.html.twig
@@ -10,9 +10,10 @@
     {% set label = label|trans %}
     {% set icon = icon|replace({'fa-': ''}) %}
     {% set class = class|replace({'btn-': ''}) %}
+    {% set mb = 'mb-' in class ? '' : 'mb-3' %}
     {% set attr = attr %}
 
-    <button class="btn btn-{{ class }} mb-3"
+    <button class="btn btn-{{ class }} {{ mb }}"
         {% for key,value in attr %} {{ key }}="{{value}}"{% endfor %}>
         <i class="fas fa-fw fa-{{ icon }} mr-2"></i>
         {{- label -}}
@@ -27,9 +28,10 @@
     {% endif %}
     {% set icon = icon|replace({'fa-': ''}) %}
     {% set class = class|replace({'btn-': ''}) %}
+    {% set mb = 'mb-' in class ? '' : 'mb-3' %}
     {% set attr = attr %}
 
-    <a href="{{ link }}" class="btn btn-{{ class|split(' ')|join(' btn-') }} mb-3 text-nowrap"
+    <a href="{{ link }}" class="btn btn-{{ class|split(' ')|join(' btn-') }} text-nowrap {{ mb }}"
         {% for key,value in attr %} {{ key }}="{{value}}"{% endfor %}>
         <i class="fas fa-fw fa-{{ icon }} mr-1"></i>
         {{- label -}}

diff --git a/templates/_partials/fields/_collection_buttons.html.twig b/templates/_partials/fields/_collection_buttons.html.twig
@@ -1,5 +1,5 @@
 {% if in_collection is defined %}
-    <div class="float-right" role="group" aria-label="Collection buttons" style="margin-top: -0.25rem; margin-bottom: 0.75rem;">
+    <div class="float-right" role="group" aria-label="Collection buttons" style="margin-top: -0.25rem">
     <input type="hidden" name="collections[{{ collection_name }}][order][]" value="{{ hash }}" />
 
     <button class='action-move-up-collection-item btn btn-secondary btn-sm' {% if is_first is defined and is_first %} disabled {% endif %}>

diff --git a/templates/_partials/fields/date.html.twig b/templates/_partials/fields/date.html.twig
@@ -35,14 +35,11 @@
     :errormessage='{{ errormessage|json_encode }}'
   ></editor-date>
   {% else %}
-    <span
-        :id='{{ id|json_encode }}'
-        :name='{{ name|json_encode }}'
-        class=""
-        {% if required == 1 %}
-        required
-        {% endif %}
-    >{{ value|date(format='F d, Y - g:ia')}}</span>
+      <br>
+    {{ value|localedatetime('%B %e, %Y - %k:%M<small>%p</small>') }}
+      <small>(<abbr class="datetime-relative" title="{{ value|localedatetime('%A %B %e, %Y - %k:%M%p') }}">
+          {{- value|date('c') -}}
+          </abbr>)</small>
   {% endif %}
 
 {% endblock %}

diff --git a/templates/content/_buttons.html.twig b/templates/content/_buttons.html.twig
@@ -20,14 +20,26 @@
         {% if status|default() %}
         <p>
             <strong>{{ __('label.current_status') }}:</strong>
-            <span class="status mx-1 is-{{ record.status}}"></span>{{ __('status.' ~ record.status) }}
+            <span class="status mx-1 is-{{ record.status}}"></span>{{ __('status.' ~ record.status) }}<br>
+            {% if record.status == 'published' %}
+                <small>
+                    ({{ 'field.modifiedAt'|trans }}:
+                    <abbr class="datetime-relative" title="{{ record.modifiedAt|localedatetime('%A %B %e, %Y - %k:%M%p') }}">
+                        {{- record.modifiedAt|date('c') -}}
+                    </abbr>)
+                </small>
+            {% endif %}
         </p>
-        {% endif %}
 
+        <hr>
+        <div class="form-fieldsgroup__summary-fields">
         {% if record.status == "published" and record.definition.viewless != true %}
-            <div class="form-fieldsgroup__summary-fields">
-                <a href="{{ record|link(true) }}" class="btn btn-tertiary" target="_blank">{{ macro.icon('fa-sign-out-alt') }} {{ __('action.view_saved') }}</a>
-            </div>
+            <a href="{{ record|link(true) }}" class="btn btn-tertiary btn-sm" target="_blank">{{ macro.icon('fa-sign-out-alt') }} {{ __('action.view_saved') }}</a>
+        {% endif %}
+            <a href="{{ record.extras.deleteLink }}" class='action-remove-collection-item btn btn-sm btn-hidden-danger' data-confirmation="{{ 'action.confirm_delete'|trans }}">
+{{ macro.icon('trash') }}{{ 'action.delete'|trans }}
+            </a>
+        </div>
         {% endif %}
 
     {% endif %}

diff --git a/templates/content/_fields_aside_summary.html.twig b/templates/content/_fields_aside_summary.html.twig
@@ -1,3 +1,4 @@
+<hr>
 <div class="form-fieldsgroup form-fieldsgroup__summary-fields">
     <ul class="summary-fields">
         <li>

diff --git a/templates/content/_localeswitcher.html.twig b/templates/content/_localeswitcher.html.twig
@@ -3,18 +3,19 @@
 {% if record.id and currentlocale %}
     <div class="card mb-3">
         <div class="card-header">
+            {{ macro.icon('language') }}
             {{ 'field.current_locale'|trans }}:
             {{ flag(currentlocale) }}<b>{{ currentlocale }}</b>
         </div>
         <div class="card-body">
 
             <general-language
-                    label="{{ 'field.switch_to_locale'|trans }}"
+                    label="{{ 'field.switch_to_locale'|trans }}:"
                     current="{{ currentlocale }}"
                     :locales="{{ locales(locales) }}"
             ></general-language>
 
-            {{ macro.buttonlink('localeswitcher.button_info', path('bolt_content_edit_locales', {'id': record.id}),  'language', 'tertiary') }}
+            {{ macro.buttonlink('localeswitcher.button_info', path('bolt_content_edit_locales', {'id': record.id}),  'info-circle', 'tertiary btn-sm') }}
 
         </div>
     </div>

diff --git a/templates/content/edit.html.twig b/templates/content/edit.html.twig
@@ -70,7 +70,7 @@
 
             <div class="card mb-3">
                 <div class="card-header">
-                    {{ 'title.save_changes'|trans }}
+                    {{ macro.icon('star') }} {{ 'title.primary_actions'|trans }}
                 </div>
                 <div class="card-body">
                   {% include '@bolt/content/_buttons.html.twig' with {'status': true}  %}
@@ -81,7 +81,7 @@
 
             <div class="card">
                 <div class="card-header">
-                    {{ 'title.options'|trans }}
+                    {{ macro.icon('sliders-h') }} {{ 'title.options'|trans }}
                 </div>
                 <div class="card-body">
                     {% include '@bolt/content/_fields_aside.html.twig' %}

diff --git a/templates/content/listing.html.twig b/templates/content/listing.html.twig
@@ -57,7 +57,7 @@
 
     <div class="card mb-3">
         <div class="card-header">
-            {{ 'title.contentlisting'|trans }} » {{ contentType.name }}
+            {{ macro.icon('star') }} {{ 'title.contentlisting'|trans }} » {{ contentType.name }}
         </div>
         <div class="card-body">
             <p>
@@ -113,20 +113,19 @@
                                placeholder="{{ 'listing.placeholder_filter'|trans }}"/>
                     </p>
                 </div>
-                <div class="form-group">
-                    {{ macro.button('listing.button_filter', 'filter', 'tertiary', {'type': 'submit'}) }}
+
+                    {{ macro.button('listing.button_filter', 'filter', 'tertiary mb-0', {'type': 'submit'}) }}
 
                     {% if sortBy is not empty or filterValue is not empty %}
-                        {{ macro.buttonlink('listing.button_clear', path('bolt_content_overview', {'contentType': contentType.slug}),  'times', 'tertiary') }}
+                        {{ macro.buttonlink('listing.button_clear', path('bolt_content_overview', {'contentType': contentType.slug}),  'times', 'tertiary mb-0') }}
                     {% endif %}
-                </div>
             </form>
         </div>
     </div>
 
     <div class="card">
         <div class="card-header">
-            {{ 'title.contentType'|trans }} {{ contentType.name }}
+            {{ macro.icon(contentType.icon_one) }}  {{ 'title.contentType'|trans }} {{ contentType.name }}
         </div>
         <div class="card-body">
 

diff --git a/translations/messages.de.xlf b/translations/messages.de.xlf
@@ -241,10 +241,10 @@
         <target>Ansehen</target>
       </segment>
     </unit>
-    <unit id="SDVQEir" name="title.save_changes">
+    <unit id="SDVQEir" name="title.primary_actions">
       <segment>
-        <source>title.save_changes</source>
-        <target>Änderungen speichern</target>
+        <source>title.primary_actions</source>
+        <target>Primäre Aktionen</target>
       </segment>
     </unit>
     <unit id="dQIY7_J" name="action.preview">

diff --git a/translations/messages.en.xlf b/translations/messages.en.xlf
@@ -1044,7 +1044,7 @@
     <unit id="ok6YulQ" name="action.view_saved">
       <segment>
         <source>action.view_saved</source>
-        <target>View (saved version) on site</target>
+        <target>View saved version</target>
       </segment>
     </unit>
     <unit id="SeTqePC" name="label.display_name">
@@ -1929,10 +1929,10 @@
         <target>Select Field to sort by…</target>
       </segment>
     </unit>
-    <unit id="SDVQEir" name="title.save_changes">
+    <unit id="SDVQEir" name="title.primary_actions">
       <segment>
-        <source>title.save_changes</source>
-        <target>Save Changes</target>
+        <source>title.primary_actions</source>
+        <target>Primary Actions</target>
       </segment>
     </unit>
     <unit id="7616Os4" name="title.options">
@@ -2283,19 +2283,19 @@
         <target>Published</target>
       </segment>
     </unit>
-    <unit id="utGAKaW" name="status.draft">
+    <unit id="HJbHjee" name="status.draft">
       <segment>
         <source>status.draft</source>
         <target>Draft</target>
       </segment>
     </unit>
-    <unit id="utGAKaE" name="status.timed">
+    <unit id="h7dP3WY" name="status.timed">
       <segment>
         <source>status.timed</source>
         <target>Timed</target>
       </segment>
     </unit>
-    <unit id="utGAKaR" name="status.held">
+    <unit id="oxqDDuK" name="status.held">
       <segment>
         <source>status.held</source>
         <target>Held</target>