Add flex to saved image modal (#5288)

- Remove clearfix div from template - Add width attribute to cover image
internetarchive · Jun 25, 2021 · a5a58c2 · a5a58c2
1 parent 3e2d6f3
commit a5a58c2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/openlibrary/templates/covers/saved.html b/openlibrary/templates/covers/saved.html
@@ -2,31 +2,31 @@
 
 $putctx("cssfile", "form")
 
-<div class="imagePost">
-    $if image:
-        <img src="$image.url(size='M')" class="cover" alt="New book cover"/>
-</div>
+<div class="saved-image-container">
+    <div class="imagePost">
+        $if image:
+            <img src="$image.url(size='M')" class="cover" width="200" alt="New book cover"/>
+    </div>
 
-<div class="imageSaved" data-image-id="$(image and image.id)">
-    <div class="saved">$_("Saved!")</div>
-    <div class="meta">
-        $if showinfo:
-            <strong>$_("Notes:")</strong><br/>
-            $ d = image.info()
-            $if d:
-                $if d.author:
-                    Uploaded by <a href="$d.author.key">$d.author.name</a> on $format_date(d.created)<br/>
-                $else:
-                    Uploaded anonymously on $datestr(d.created)<br/>
-                $if d.source_url:
-                    <a href="$d.source_url">$d.source_url</a><br/>
-            <br/>
-        <a href="$changequery()">$_("Add another image")</a>?
+    <div class="imageSaved" data-image-id="$(image and image.id)">
+        <div class="saved">$_("Saved!")</div>
+        <div class="meta">
+            $if showinfo:
+                <strong>$_("Notes:")</strong><br/>
+                $ d = image.info()
+                $if d:
+                    $if d.author:
+                        Uploaded by <a href="$d.author.key">$d.author.name</a> on $format_date(d.created)<br/>
+                    $else:
+                        Uploaded anonymously on $datestr(d.created)<br/>
+                    $if d.source_url:
+                        <a href="$d.source_url">$d.source_url</a><br/>
+                <br/>
+            <a href="$changequery()">$_("Add another image")</a>?
+        </div>
     </div>
 </div>
 
-<div class="clearfix"></div>
-
 <div class="formButtons">
     <button type="button" name="finished" id="popClose" value="Finished" class="largest">$_("Finished")</button>
 </div>
diff --git a/static/css/page-form.less b/static/css/page-form.less
@@ -90,12 +90,10 @@ footer,
   padding: .4em;
 }
 .imagePost {
-  float: left;
   width: 300px;
   text-align: center;
 }
 .imageSaved {
-  float: left;
   width: 300px;
   font-size: .75em;
   color: @grey;
@@ -109,6 +107,9 @@ footer,
   min-height: 30px;
   margin: 25px 0 15px;
 }
+.saved-image-container {
+  display: flex;
+}
 
 @media all and ( min-width: @width-breakpoint-desktop ) {
   body {