Skip to content

Commit

Permalink
Update sidebar layout on editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@corbindavenport
corbindavenport committed Mar 23, 2023
1 parent f237d6b commit 5fd8157
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 73 deletions.
43 changes: 2 additions & 41 deletions css/photostack.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
nav, .photostack-mobile-toolbar {
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

body {
overscroll-behavior: contain;
padding-top: 70px;
overscroll-behavior-y: none;
padding-top: 56px;
}

#photostack-watermark-preview, #photostack-editor-preview img, #photostack-watermark-editor-preview {
Expand Down Expand Up @@ -38,18 +34,6 @@ body {
max-width: 900px;
}

/* Mobile toolbar */

.photostack-mobile-toolbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #303030;
z-index: 200;
padding: 10px 0 10px 0;
}

/* Styles for large devices */

@media (min-width: 992px) {
Expand All @@ -68,24 +52,6 @@ body {
max-height: 60vh;
}

/* Hide in-nav buttons on mobile, in favor of floating toolbar */

nav .form-inline {
display: none;
}

/* Don't allow toasts to cover floating toolbar */

.toast-container {
bottom: 65px !important;
}

/* Fix bottom of container being cut off by mobile toolbar */

.col-lg-4 {
padding-bottom: 60px;
}

/* Allow watermark editor to fill screen width */

#photostack-watermark-editor-modal .modal-dialog {
Expand All @@ -98,11 +64,6 @@ body {

@media (max-width: 767.98px) {

.photostack-mobile-toolbar .row div {
padding-left: 5px;
padding-right: 5px;
}

.toast-container {
padding: 0 5px !important;
}
Expand Down
45 changes: 13 additions & 32 deletions edit/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,10 +67,13 @@
<i class="bi bi-trash"></i>
<span class="d-sm-none d-md-inline">Clear</span>
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#photostack-export-modal" data-backdrop="static" data-keyboard="false" disabled aria-label="Export">
<button class="btn btn-primary me-2" type="button" data-bs-toggle="modal" data-bs-target="#photostack-export-modal" data-backdrop="static" data-keyboard="false" disabled aria-label="Export">
<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>
Expand All @@ -80,7 +83,7 @@
<div class="container-fluid d-print-none">
<div class="row">
<!-- Preview container -->
<div class="col-lg col-md-6 photostack-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">
Expand All @@ -94,13 +97,13 @@
</div>
</div>
<!-- Settings panel container -->
<div class="col-lg-4 col-md-6">
<div class="col-12 col-md-4 p-0">
<!-- 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 mb-3 mt-3 mt-md-0">
<div class="card mt-3 mt-md-0 rounded-0 border-bottom-0">
<div class="card-header">
Resize
</div>
Expand All @@ -120,7 +123,7 @@
</div>
</div>
<!-- Advertisements card -->
<div class="card mb-3">
<div class="card rounded-0 border-bottom-0">
<div class="card-header">
Advertisements
</div>
Expand All @@ -136,7 +139,7 @@
</div>
</div>
<!-- Watermarks card-->
<div class="card mb-3">
<div class="card rounded-0 border-bottom-0">
<div class="card-header">
Watermark
</div>
Expand All @@ -152,7 +155,7 @@
</div>
</div>
<!-- Border card -->
<div class="card mb-3">
<div class="card rounded-0 border-bottom-0">
<div class="card-header">
Border
</div>
Expand All @@ -164,7 +167,7 @@
</div>
</div>
<!-- Resize card -->
<div class="card mb-3 mt-3 mt-md-0">
<div class="card rounded-0 border-bottom-0">
<div class="card-header">
Crop
</div>
Expand All @@ -191,7 +194,7 @@
</div>
</div>
<!-- Other options card-->
<div class="card mb-3">
<div class="card rounded-0 border-bottom-0">
<div class="card-header">
Miscellaneous
</div>
Expand All @@ -214,36 +217,14 @@
<h2>Welcome to PhotoStack!</h2>
</div>
<p>Welcome to PhotoStack, the free and open-source batch photo editor.</p>
<p>To get started, click the Import button at the <span class="d-lg-none">bottom</span><span class="d-none d-lg-inline">top-right</span> to import some images. When you're ready to save your work, click the Export button.</p>
<p>To get started, <span class="d-sm-none">click the menu button at the top-right of the screen, then click Import</span><span class="d-none d-sm-inline">click the Import button at the top-right of the screen</span> to import some images. When you're ready to save your work, click the Export button.</p>
<p>
<button type="button" class="btn btn-primary w-100" data-bs-dismiss="modal" aria-label="Close">Let's go!</button>
</p>
</div>
</div>
</div>
</div>
<!-- About modal -->
<div class="modal fade" id="photostack-about-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">About</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div style="text-align: center; margin: 1em 0;">
<h1>PhotoStack</h1>
</div>
<p>PhotoStack is developed by <a href="https://corbin.io" target="_blank">Corbin Davenport</a>, and all the code is <a href="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/photostack/" target="_blank">freely available as open-source</a>. If you want to report a bug or suggest features, please <a href="https://github.com/photostack/photostack/issues/new" target="_blank">create an issue on GitHub</a> or <a href="https://discord.gg/59wfy5cNHw" target="_blank">join the Discord group</a>.</p>
<!-- Donation links have to be hidden on the Android app to pass Play Store rules :( -->
<div class="photostack-android-hide w-100">
<p><a href="https://cash.app/$corbdav" target="_blank"><button type="button" class="btn btn-primary w-100">Support via Cash App</button></a></p>
<p><a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=4SZVSMJKDS35J&lc=US&item_name=PhotoStack%20Donation&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted" target="_blank"><button type="button" class="btn btn-primary w-100">Support via PayPal</button></a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Keyboard shortcuts modal -->
<div class="modal fade" id="photostack-keyboard-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
</button>
</div>
</div>
<!-- TODO: Merge content from former About dialog -->
<div class="row mt-5">
<div class="col-md-6">
<h3>Feature-packed</h3>
Expand Down

0 comments on commit 5fd8157

Please sign in to comment.