third pass through /lookup: fix "lookup.html" styling

freedomofpress · Jul 19, 2021 · f37fc17 · f37fc17
1 parent 72def3f
commit f37fc17
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 72 deletions.
diff --git a/securedrop/sass/modules/_center-text-align.sass b/securedrop/sass/modules/_center-text-align.sass
@@ -1,5 +1,6 @@
 =center-text-align
   .center
+    clear: both
     text-align: center
 
   .highlight

diff --git a/securedrop/sass/modules/_code.sass b/securedrop/sass/modules/_code.sass
@@ -1,15 +1,21 @@
 =code
+  .code, .code-reminder
+    background:
+      image: url(/static/i/font-awesome/lock-black.png)
+      origin: content-box
+      repeat: no-repeat
+      size: 20px 23px
+
   .code
-    background: rgba(0, 0, 0, 0.05)
+    background:
+      color: rgba(0, 0, 0, 0.05)
     box-sizing: border-box
     -moz-box-sizing: border-box
     padding: 10px 15px
     border-bottom: 2px solid $color_warning_red
     font-size: large
     text-align: center
 
+  .code-reminder
     background:
-      image: url(/static/i/font-awesome/lock-black.png)
-      origin: content-box
-      repeat: no-repeat
-      size: 20px 23px
+      size: 17px 20px
diff --git a/securedrop/sass/modules/_panel.sass b/securedrop/sass/modules/_panel.sass
@@ -8,6 +8,6 @@
       border: 1px solid #e1e1e1
       float: right
 
-      section
+      section, article, .section-spacing
         display: flow-root
         margin-top: 10px + 2*8px  // cf. hr.no-line
diff --git a/securedrop/sass/modules/_snippet.sass b/securedrop/sass/modules/_snippet.sass
@@ -22,6 +22,22 @@
         min-width: 100%
         max-width: 100%
 
+      span.fh:before
+        content: ""
+
+        display: block
+        width: 100%
+        height: 56px
+        margin:
+          top: 5px
+          bottom: 10px
+
+        background:
+          image: url(/static/i/arrow-upload-large.png)
+          position: center
+          repeat: no-repeat
+          size: 56px 56px
+
     .message
       display: inline-block
       vertical-align: top

diff --git a/securedrop/sass/source.sass b/securedrop/sass/source.sass
@@ -25,10 +25,11 @@
     display: block
 
 #codename-hint
-  background: rgba(0, 0, 0, 0.05)
+  background:
+    color: rgba(0, 0, 0, 0.05)
   box-sizing: border-box
   -moz-box-sizing: border-box
-  margin-top: 5px
+  margin-top: 5px !important
   padding: 5px 10px
   text-align: center
   width: 80%
@@ -106,12 +107,16 @@ p#codename
     width: 80%
 
   .hidden-prompt
+    display: block
+    border: none
     margin: 0
     padding: 0
     height: 0
     overflow: hidden
     text-align: center
     visibility: hidden
+    width: 80%
+    position: static
 
     &:target
       margin: auto
@@ -161,11 +166,31 @@ p#codename
       padding: 5px
       background-color: inherit
       color: $color_urgent_coral
-      font-size: 14px
+      font-size: 0
       clear: right
       text-decoration: none
       border: 0
 
+      span
+        font-size: 0
+
+        &:after
+          content: ""
+          display: inline-block
+          background:
+            image: url(/static/i/trash-x-out.png)
+            position: center
+            repeat: no-repeat
+            size: contain
+          opacity: 0.9
+          height: 16px
+          width: 20px
+
+        &:hover, &:active
+          &:after
+            background:
+              image: url(/static/i/trash-x-solid.png)
+
       &:hover
         color: #FA6E6E
 
@@ -177,6 +202,7 @@ p#codename
     font-size: 14px
     background: white
     border: 1px solid $color_grey_dark
+    padding: 0
 
     p
       *
@@ -191,12 +217,17 @@ p#codename
         margin: 0 2%
         padding: 5px 15px
 
-h4#no-replies
-  text-align: center
-  color: $color_grey_medium
-  background: $color_grey_xlight
-  padding: 40px
-  margin: 0.5em 0
+  output#no-replies
+    display: block
+    font-weight: bold
+    text-align: center
+    color: $color_grey_medium
+    background: $color_grey_xlight
+    padding: 40px
+    margin: 0.5em 0
+
+    &:before, &:after
+      content: " — "
 
 p.explanation
   text-align: left
@@ -261,8 +292,20 @@ p#max-file-size
       height: 20px
       width: 20px
 
+#cancel
+  &:before
+    content: ""
+    display: inline-block
+    background:
+      image: url(/static/i/x_icon-button_blue.png)
+      origin: content-box
+      position: center
+      repeat: no-repeat
+      size: contain
+    width: 9px
+    height: 11px
+
   &:hover, &:active
-    span
-      &:active
-        background:
-          image: url(/static/i/font-awesome/refresh-white.png)
+    &:before
+      background:
+        image: url(/static/i/x_icon-grimace_blue.png)
diff --git a/securedrop/source_templates/base.html b/securedrop/source_templates/base.html
@@ -41,12 +41,6 @@ <h1>{{ gettext("We're sorry, our SecureDrop is currently offline.") }}</h1>
             </nav>
           {% endif %}
 
-          {# FIXME:
-          {% if not new_user%}
-            <hr class="no-line">
-          {% endif %}
-          #}
-
           {% endif %}
 
           {% block body %}{% endblock %}

diff --git a/securedrop/source_templates/lookup.html b/securedrop/source_templates/lookup.html
@@ -1,13 +1,9 @@
 {% extends "base.html" %}
 
-{% block header %}
-{{ super() }}
+{% block body %}
 {% if new_user %}
 <section class="code-reminder pull-left" id="codename-hint" aria-label="{{ gettext('Codename') }}">
   <div id="codename-hint-visible">
-    {# FIXME:
-    <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/lock-black.png') }}" alt="" width="17" height="20">
-    #}
     <label id="codename-label" for="codename" aria-hidden="true">{{ gettext('Remember, your codename is:') }}</label>
     {# ARIA-HIDDEN violates axe rule aria-hidden-focus, because we (a) want to
     hide the superfluous "show"/"hide" links from screen-readers, (b) do not
@@ -21,17 +17,8 @@
     </div>
   </div>
 </section>
-{# FIXME:
-<hr class="header-separator-high">
-#}
-{% else %}
-{# FIXME:
-<hr class="no-line">
-#}
 {% endif %}
-{% endblock %}
 
-{% block body %}
 <div class="center">
   {% include 'flashed.html' %}
 </div>
@@ -52,19 +39,12 @@ <h2 id="submit-heading" class="headline">{{ gettext('Submit Messages') }}</h2>
 {% endif %}
 {{ gettext('<a href="{url}" class="text-link">Learn more</a>.').format(url=url_for('info.why_download_public_key')) }}</p>
 
-{# FIXME:
-<hr class="no-line">
-#}
-
-<form id="upload" method="post" action="{{ url_for('main.submit') }}" enctype="multipart/form-data" autocomplete="off">
+<form id="upload" class="section-spacing" method="post" action="{{ url_for('main.submit') }}" enctype="multipart/form-data" autocomplete="off">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <div class="snippet">
 {% if allow_document_uploads %}
     <div class="attachment grid-item center">
-      {# FIXME:
-      <img class="center" id="upload-icon" src="{{ url_for('static', filename='i/arrow-upload-large.png') }}" alt="" width="56" height="56">
-      #}
-      {{ form.fh(**{"aria-describedby": "max-file-size"}) }}
+      <span class="fh">{{ form.fh(**{"aria-describedby": "max-file-size"}) }}</span>
       <p class="center" id="max-file-size">{{ gettext('Maximum upload size: 500 MB') }}</p>
     </div>
 {% endif %}
@@ -73,31 +53,20 @@ <h2 id="submit-heading" class="headline">{{ gettext('Submit Messages') }}</h2>
     </div>
   </div>
 
-  {# FIXME:
-  <hr class="no-line">
-  #}
-  <div class="pull-right">
+  <div class="pull-right section-spacing">
     <button type="submit" id="submit-doc-button">
       {{ gettext('SUBMIT') }}
     </button>
 
 
 
     <a href="{{ url_for('main.lookup') }}" class="btn secondary" id="cancel">
-      {# FIXME:
-      <img class="icon off-hover" src="{{ url_for('static', filename='i/x_icon-button_blue.png') }}" alt="" width="9" height="11">
-      <img class="icon on-hover" src="{{ url_for('static', filename='i/x_icon-grimace_blue.png') }}" alt="" width="9" height="11">
-      #}
       {{ gettext('CANCEL') }}
     </a>
   </div>
 </form>
 </section>
 
-{# FIXME:
-<hr class="no-line">
-#}
-
 <section aria-labelledby="replies-heading">
 <h2 id="replies-heading" class="headline">{{ gettext('Read Replies') }}</h2>
 
@@ -106,21 +75,14 @@ <h2 id="replies-heading" class="headline">{{ gettext('Read Replies') }}</h2>
     <output role="status">
       {{ gettext("You have received a reply. To protect your identity in the unlikely event someone learns your codename, please delete all replies when you're done with them. This also lets us know that you are aware of our reply. You can respond by submitting new files and messages above.") }}
     </output>
-    {# FIXME:
-    <hr class="no-line">
-    #}
     {% for reply in replies %}
       <article class="reply" aria-labelledby="timestamp-{{ reply.filename }}">
         <time id="timestamp-{{ reply.filename }}" class="date" title="{{ reply.date|rel_datetime_format }}" datetime="{{ reply.date }}" aria-hidden="true">{{ reply.date|rel_datetime_format(relative=True) }}</time>
         <form id="delete" class="message" method="post" action="{{ url_for('main.delete') }}" autocomplete="off">
           <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
           <input type="hidden" name="reply_filename" value="{{ reply.filename }}" autocomplete="off">
           <a href="#confirm-delete-{{ reply.filename }}" id="delete-reply-{{ reply.filename }}" class="delete" aria-label="{{ gettext('Delete this reply') }}">
-            {{ gettext('Delete') }}
-            {# FIXME:
-            <img class="icon off-hover" id="delete-reply-{{ reply.filename }}" src="{{ url_for('static', filename='i/trash-x-out.png') }}" alt="{{ gettext('Delete reply') }}" width="16" height="20">
-            <img class="icon on-hover" id="delete-reply-{{ reply.filename }}" src="{{ url_for('static', filename='i/trash-x-solid.png') }}" alt="{{ gettext('Delete reply') }}" width="16" height="20">
-            #}
+            <span>{{ gettext('Delete') }}</span>
           </a>
           <dialog open id="confirm-delete-{{ reply.filename }}" class="confirm-prompt" aria-labelledby="delete-heading-{{ reply.filename }}">
             <h3 id="delete-heading-{{ reply.filename }}" hidden>Delete reply from {{ reply.date|rel_datetime_format(relative=True) }}?</h3>
@@ -131,9 +93,6 @@ <h3 id="delete-heading-{{ reply.filename }}" hidden>Delete reply from {{ reply.d
           </dialog>
         </form>
         <blockquote>{{ reply.decrypted | nl2br }}</blockquote>
-        {# FIXME:
-        <div class="clearfix"></div>
-        #}
       </article>
     {% endfor %}
     <form id="delete-all" method="post" action="{{ url_for('main.batch_delete') }}">
@@ -146,7 +105,7 @@ <h3 id="delete-all-heading"><strong>{{ gettext('Are you finished with the replie
       </dialog>
     </form>
   {% else %}
-    <output role="status" id="no-replies" class="explanation">{{ gettext('— No Messages —') }}</output>
+    <output role="status" id="no-replies" class="explanation">{{ gettext('No Messages') }}</output>
   {% endif %}
 </div>
 </section>