Make license patterns easier to read with a new layout

openSUSE · Mar 8, 2024 · 225d4c6 · 225d4c6
1 parent fda36f5
commit 225d4c6
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 21 deletions.
diff --git a/assets/sass/app.scss b/assets/sass/app.scss
@@ -246,3 +246,56 @@ body {
   color: #000;
   text-decoration: none;
 }
+
+.pattern-container {
+  margin-bottom: 4rem;
+  margin-top: 1rem;
+}
+.pattern-file-container {
+  padding: 0;
+}
+.pattern-header {
+  background-color: rgb(246, 248, 250);
+  border: 1px solid rgb(208, 215, 222);
+  border-radius: 0.25rem 0.25rem 0 0;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 10px;
+}
+.pattern-header a{
+  color: #212529;
+  text-decoration: none;
+}
+.pattern-header a:hover {
+  text-decoration: underline;
+}
+.pattern-source {
+  border: 1px solid #dfe2e5 !important;
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+}
+.pattern-source pre {
+  font-family: monospace;
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+  line-height: 20px;
+  color: rgba(27, 31, 35, 0.3);
+  border: 0 !important;
+  padding-left: 0.5em;
+  color: #24292e;
+  margin-left: 0.5em;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+.pattern-footer {
+  border: 1px solid rgb(208, 215, 222);
+  border-top: 0;
+  border-radius: 0 0 0.25rem 0.25rem;
+  font-size: 13px;
+  line-height: 20px;
+  padding: 10px;
+}
diff --git a/t/index.t b/t/index.t
@@ -148,19 +148,19 @@ subtest 'Pattern change' => sub {
     ->element_exists_not('input:checked');
   $t->post_ok('/licenses/update_pattern/1' => form => {license => 'Apache-2.0', pattern => 'real-time web framework'})
     ->status_is(302)->header_is(Location => '/licenses/edit_pattern/1');
-  $t->get_ok('/licenses/Apache-2.0')->status_is(200)->element_exists('li div a[href=/licenses/edit_pattern/1]')
-    ->text_is('li pre' => 'real-time web framework')
+  $t->get_ok('/licenses/Apache-2.0')->status_is(200)->element_exists('div div a[href=/licenses/edit_pattern/1]')
+    ->text_is('div pre' => 'real-time web framework')
     ->text_like('.alert-success' => qr/Pattern has been updated, reindexing all affected packages/);
 
   $t->post_ok('/licenses/update_patterns' => form => {license => 'Apache-2.0', spdx => 'Apache-2'})->status_is(302)
     ->header_is(Location => '/licenses/Apache-2.0');
-  $t->get_ok('/licenses/Apache-2.0')->status_is(200)->element_exists('li div a[href=/licenses/edit_pattern/1]')
-    ->text_is('li pre' => 'real-time web framework')->text_like('.alert-danger' => qr/not a valid SPDX expression/);
+  $t->get_ok('/licenses/Apache-2.0')->status_is(200)->element_exists('div div a[href=/licenses/edit_pattern/1]')
+    ->text_is('div pre' => 'real-time web framework')->text_like('.alert-danger' => qr/not a valid SPDX expression/);
 
   $t->post_ok('/licenses/update_patterns' => form => {license => 'Apache-2.0', spdx => 'Apache-2.0'})->status_is(302)
     ->header_is(Location => '/licenses/Apache-2.0');
-  $t->get_ok('/licenses/Apache-2.0')->status_is(200)->element_exists('li div a[href=/licenses/edit_pattern/1]')
-    ->text_is('li pre' => 'real-time web framework')->text_like('.alert-success' => qr/2 patterns have been updated/);
+  $t->get_ok('/licenses/Apache-2.0')->status_is(200)->element_exists('div div a[href=/licenses/edit_pattern/1]')
+    ->text_is('div pre' => 'real-time web framework')->text_like('.alert-success' => qr/2 patterns have been updated/);
 };
 
 # Automatic reindexing

diff --git a/templates/license/show.html.ep b/templates/license/show.html.ep
@@ -35,29 +35,36 @@
   % }
 </h3>
 
-<ul>
-
 % for my $match (@$patterns) {
-    <li>
+  <div class="row pattern-container">
+    <div class="col-12 pattern-file-container">
+      <div class="pattern-header">
         <div>Created <time class="timeago" datetime="<%= $match->{created} %>"><%= $match->{created} %></time>
-            % if (current_user_has_role 'admin') {
-              <a href="<%= url_for('edit_pattern', id => $match->{id}) %>" title="Edit" style="float: right"><i class="fas fa-edit"></i></a>
-            % }
+          % if (current_user_has_role 'admin') {
+            <a href="<%= url_for('edit_pattern', id => $match->{id}) %>" title="Edit" class="float-end">
+              <i class="fas fa-edit"></i>
+            </a>
+          % }
         </div>
+      </div>
+      <div class="pattern-source">
         <pre><%= $match->{pattern} %></pre>
+      </div>
+      <div class="pattern-footer">
         % if ($match->{packname}) {
-            <div>Package: <%= $match->{packname} %></div>
+          <span><b>Package:</b> <%= $match->{packname} %></span>
         % }
         % if ($match->{opinion} || $match->{patent} || $match->{trademark} || $match->{export_restricted}) {
-            <div>Flags:
-                %= $match->{opinion} ? 'Opinion' : ''
-                %= $match->{patent} ? 'Patent' : ''
-                %= $match->{trademark} ? 'Trademark' : ''
-                %= $match->{export_restricted} ? 'Export Restricted' : ''
-            </div>
+          <span><b>Flags:</b>
+              %= $match->{opinion} ? 'Opinion' : ''
+              %= $match->{patent} ? 'Patent' : ''
+              %= $match->{trademark} ? 'Trademark' : ''
+              %= $match->{export_restricted} ? 'Export Restricted' : ''
+          </span>
         % }
-    </li>
+      </div>
+    </div>
+  </div>
 % }
-</ul>
 
 % content_for ready_function => 'jQuery("time.timeago").timeago();'