Update editor layout, add editor redirect

corbindavenport · Mar 23, 2023 · a87a68c · a87a68c
1 parent 5fd8157
commit a87a68c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 35 deletions.
diff --git a/css/photostack.css b/css/photostack.css
@@ -3,22 +3,31 @@ body {
  padding-top: 56px;
 }
 
-#photostack-watermark-preview, #photostack-editor-preview img, #photostack-watermark-editor-preview {
+#photostack-watermark-preview,
+#photostack-editor-preview img,
+#photostack-watermark-editor-preview {
  max-width: 100%;
 }
 
 #photostack-watermark-editor-preview {
  border-radius: 0.25rem;
 }
 
-#photostack-original-container, #photostack-canvas-container, #photostack-import-file, #photostack-watermark-file-import, #photostack-import-zip, #photostack-watermark-import-image, #photostack-watermark-cache {
- display: none;
-}
 
-.photostack-preview-card {
+#photostack-editor-preview {
  position: -webkit-sticky;
  position: sticky;
- top: 70px;
+ top: 58px;
+}
+
+#photostack-original-container,
+#photostack-canvas-container,
+#photostack-import-file,
+#photostack-watermark-file-import,
+#photostack-import-zip,
+#photostack-watermark-import-image,
+#photostack-watermark-cache {
+ display: none;
 }
 
 #photostack-watermark-manager-list {
@@ -34,12 +43,16 @@ body {
  max-width: 900px;
 }
 
-/* Styles for large devices */
+/* Styles for medium and up devices */
+
+@media (min-width: 768px) {
 
-@media (min-width: 992px) {
+ #photostack-editor-preview {
+ min-height: calc(100vh - 58px);
+ }
 
- .photostack-preview-card img {
- max-height: calc(100vh - 8rem);
+ #photostack-editor-preview img {
+ max-height: calc(100vh - 58px);
  }
 
 }
@@ -48,10 +61,6 @@ body {
 
 @media (max-width: 991.98px) {
 
- .photostack-preview-card img {
- max-height: 60vh;
- }
-
  /* Allow watermark editor to fill screen width */
 
  #photostack-watermark-editor-modal .modal-dialog {
@@ -64,6 +73,10 @@ body {
 
 @media (max-width: 767.98px) {
 
+ #photostack-editor-preview img {
+ max-height: 60vh;
+ }
+
  .toast-container {
  padding: 0 5px !important;
  }

diff --git a/edit/index.html b/edit/index.html
@@ -71,9 +71,6 @@
  <i class="bi bi-share-fill"></i>
  <span class="d-sm-none d-md-inline">Export</span>
  </button>
- <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#photostack-keyboard-modal" data-backdrop="static" data-keyboard="false" aria-label="Keyboard Shortcuts">
- <i class="bi bi-keyboard-fill"></i>
- </button>
  </form>
  </div>
  </div>
@@ -83,27 +80,20 @@
  <div class="container-fluid d-print-none">
  <div class="row">
  <!-- Preview container -->
- <div class="col-12 col-md-8 photostack-preview-container">
- <!-- Temporary text for when no photos are imported -->
- <div class="card photostack-preview-card">
- <div class="card-body" style="padding: 0">
- <div class="text-center" id="photostack-editor-preview">
- <p><br />A preview of your settings will appear here once you import some images.</p>
- </div>
- </div>
- <div class="card-footer bg-transparent">
- <small class="text-muted">Preview is limited to 800px wide.</small>
- </div>
+ <div class="col-12 col-md-8 photostack-preview-container text-center">
+ <div class="d-inline-flex align-items-center" id="photostack-editor-preview">
+ <!-- Temporary text for when no photos are imported -->
+ <div class="p-5 text-center w-100">A preview of your settings will appear here once you import some images.</div>
  </div>
  </div>
  <!-- Settings panel container -->
- <div class="col-12 col-md-4 p-0">
+ <div class="col-12 col-md-4">
  <!-- Safari message -->
  <div class="alert alert-warning photostack-safari-warning" data-bs-toggle="modal" data-bs-target="#photostack-safari-modal" style="display: none; cursor: pointer;">
  Safari may periodically delete PhotoStack's data, including saved watermarks. Press here for more information.
  </div>
  <!-- Resize card -->
- <div class="card mt-3 mt-md-0 rounded-0 border-bottom-0">
+ <div class="card mt-3">
  <div class="card-header">
  Resize
  </div>
@@ -123,7 +113,7 @@
  </div>
  </div>
  <!-- Advertisements card -->
- <div class="card rounded-0 border-bottom-0">
+ <div class="card mt-3">
  <div class="card-header">
  Advertisements
  </div>
@@ -139,7 +129,7 @@
  </div>
  </div>
  <!-- Watermarks card-->
- <div class="card rounded-0 border-bottom-0">
+ <div class="card mt-3">
  <div class="card-header">
  Watermark
  </div>
@@ -155,7 +145,7 @@
  </div>
  </div>
  <!-- Border card -->
- <div class="card rounded-0 border-bottom-0">
+ <div class="card mt-3">
  <div class="card-header">
  Border
  </div>
@@ -167,7 +157,7 @@
  </div>
  </div>
  <!-- Resize card -->
- <div class="card rounded-0 border-bottom-0">
+ <div class="card mt-3">
  <div class="card-header">
  Crop
  </div>
@@ -194,7 +184,7 @@
  </div>
  </div>
  <!-- Other options card-->
- <div class="card rounded-0 border-bottom-0">
+ <div class="card mt-3">
  <div class="card-header">
  Miscellaneous
  </div>
@@ -205,6 +195,9 @@
  </div>
  </div>
  </div>
+ <div class="mt-3 mb-3">
+ <a href="#" data-bs-toggle="modal" data-bs-target="#photostack-keyboard-modal" data-backdrop="static" data-keyboard="false">Keyboard shortcuts</a>
+ </div>
  </div>
  </div>
  </div>

diff --git a/editor.html b/editor.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!-- This is a redirect to the current editor -->
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Redirecting...</title>
+ <meta http-equiv="refresh" content="0; url=/edit/" />
+</head>
+<body>
+
+ <p>
+ Please <a href="/edit/">click here</a> if you are not redirected.
+ </p>
+
+</body>
+</html>