Merge pull request #2804 from AlchemyCMS/ui-fixes

Some UI fixes
AlchemyCMS · Mar 27, 2024 · 701886d · 701886d
2 parents f296074 + 6441806
commit 701886d
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 68 deletions.
diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss
@@ -307,7 +307,7 @@ div#filter_bar {
 
 #overlay_file_list {
   .assign_file_file {
-    display: block;
+    display: flex;
     margin-bottom: 4px;
     word-break: break-all;
 
@@ -322,7 +322,8 @@ div#filter_bar {
 
     a {
       @extend %text-overflow;
-      display: block;
+      display: flex;
+      width: 100%;
       line-height: 25px;
       text-decoration: none;
       padding: $default-padding 2 * $default-padding;

diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss
@@ -46,10 +46,6 @@
   textarea {
     width: 100%;
   }
-
-  > .message {
-    margin: 2 * $default-margin;
-  }
 }
 
 alchemy-tinymce {
@@ -236,7 +232,7 @@ alchemy-tinymce {
     .element-body,
     .element-footer,
     .nestable-elements,
-    .message,
+    alchemy-message,
     .nested-elements {
       display: none;
     }
@@ -355,7 +351,7 @@ alchemy-tinymce {
     text-align: left;
   }
 
-  .message {
+  alchemy-message {
     margin: 2 * $default-margin;
   }
 
@@ -784,7 +780,7 @@ select.long {
   }
 
   &.missing {
-    .message {
+    alchemy-message {
       margin: 0;
       @include clearfix;
     }

diff --git a/app/assets/stylesheets/alchemy/lists.scss b/app/assets/stylesheets/alchemy/lists.scss
@@ -1,4 +1,5 @@
-ul, ol {
+ul,
+ol {
   padding-left: 16px;
   margin-top: 1em;
   margin-bottom: 1em;
@@ -15,15 +16,15 @@ ul.list {
 
   li {
     list-style-type: none;
-    display: block;
+    display: flex;
     margin-bottom: 0;
 
     &.list-header {
       overflow: hidden;
       background-color: transparent;
       font-weight: bold;
-      padding: $default-padding 2*$default-padding;
-      margin-bottom: 2*$default-margin;
+      padding: $default-padding 2 * $default-padding;
+      margin-bottom: 2 * $default-margin;
 
       .list-secondary {
         color: $text-color;
@@ -41,19 +42,19 @@ ul.list {
 
   .list-primary,
   .list-secondary {
-    display: inline-block;
+    display: inline-flex;
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
   }
 
   .list-primary {
-    float: left;
     max-width: 65%;
   }
 
-  .list-secondary, .right {
-    float: right;
+  .list-secondary,
+  .right {
+    margin-left: auto;
     text-align: left;
     width: 30%;
     color: $dark-gray;

diff --git a/app/assets/stylesheets/alchemy/typography.scss b/app/assets/stylesheets/alchemy/typography.scss
@@ -1,55 +1,74 @@
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5 {
   padding: 0;
   margin: 1em 0;
 }
 
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4 {
   font-weight: bold;
 }
 
-h1, .h1 {
+h1,
+.h1 {
   font-size: 1.5rem;
 }
 
-h2, .h2 {
+h2,
+.h2 {
   font-size: 1.25rem;
 }
 
-h3, .h3 {
+h3,
+.h3 {
   font-size: 1.125rem;
 }
 
-h4, .h4,
-h5, .h5 {
+h4,
+.h4,
+h5,
+.h5 {
   font-size: 1rem;
 }
 
-h5, .h5 {
+h5,
+.h5 {
   font-weight: normal;
 }
 
 p {
-  margin: 0 0 2*$default-margin 0;
+  margin: 0 0 2 * $default-margin 0;
   white-space: normal;
 
   a {
     color: $anchor-color;
   }
 }
 
-kbd {
-  font-family: Courier, monospaced;
-  background: $medium-gray;
+kbd,
+code {
   border: $default-border;
-  padding: 0.25em 0.5em;
-  vertical-align: top;
-  margin-right: 1ex;
   border-radius: $default-border-radius;
+  font-family: Courier, monospaced;
+  margin: 0 0.25ex;
+  padding: 0.25em 0.5em;
+  vertical-align: baseline;
+}
+
+code {
+  background: $medium-gray;
 }
diff --git a/app/views/alchemy/admin/dashboard/help.html.erb b/app/views/alchemy/admin/dashboard/help.html.erb
@@ -1,21 +1,57 @@
 <h2><%= Alchemy.t('Global shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>?</kbd><%= Alchemy.t('Open help window', scope: 'help.shortcuts') %></li>
-  <li><kbd>esc</kbd><%= Alchemy.t('Close current dialog', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>q</kbd><%= Alchemy.t('Open logout dialog', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>f</kbd><%= Alchemy.t('Focus search field', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Create a new record', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>?</kbd>
+    <%= Alchemy.t('Open help window', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>esc</kbd>
+    <%= Alchemy.t('Close current dialog', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>q</kbd>
+    <%= Alchemy.t('Open logout dialog', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>f</kbd>
+    <%= Alchemy.t('Focus search field', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Create a new record', scope: 'help.shortcuts') %>
+  </li>
 </ul>
 <h2><%= Alchemy.t('Page edit shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>alt</kbd><kbd>i</kbd><%= Alchemy.t('Show page infos', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Create new element', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>e</kbd><%= Alchemy.t('Edit page properties', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>r</kbd><%= Alchemy.t('Reload the preview', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>x</kbd><%= Alchemy.t('Leave the page', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>alt</kbd><kbd>i</kbd>
+    <%= Alchemy.t('Show page infos', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Create new element', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>e</kbd>
+    <%= Alchemy.t('Edit page properties', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>r</kbd>
+    <%= Alchemy.t('Reload the preview', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>x</kbd>
+    <%= Alchemy.t('Leave the page', scope: 'help.shortcuts') %>
+  </li>
 </ul>
 <h2><%= Alchemy.t('Library shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Open upload form', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>a</kbd><%= Alchemy.t('Select all pictures', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Open upload form', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>a</kbd>
+    <%= Alchemy.t('Select all pictures', scope: 'help.shortcuts') %>
+  </li>
 </ul>
diff --git a/app/views/alchemy/base/500.html.erb b/app/views/alchemy/base/500.html.erb
@@ -18,21 +18,10 @@
     <%= @error.class %>
     <%= @notice %>
   </h2>
-  <p class="hidden">
-  <% @trace.each do |line| %>
-    <%= line %><br>
-  <% end %>
-  </p>
-  <a href="#" class="error_details--toggle">
-    <%= Alchemy.t('Show error details') %>
-  </a>
+  <details>
+    <summary><%= Alchemy.t('Show error details') %></summary>
+    <% @trace.each do |line| %>
+      <%= line %><br>
+    <% end %>
+  </details>
 <% end %>
-
-<script>
-  $(function(){
-    $('.error_details--toggle').on("click", function(){
-      $('.error.message p').toggleClass('hidden');
-      return false;
-    });
-  });
-</script>