mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-02 11:30:22 +02:00
Code Issues Releases Wiki Activity

make modals more subtle and intuitive

Browse Source
This commit is contained in:
Kushagra Gour
2018-04-15 10:14:42 +05:30
parent f8b2a63285
commit 292c0bde22
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@@ -439,7 +439,7 @@
<hr> <hr>
<h3>Editor</h3> <h3>Editor</h3>
<div class="flex"> <div class="flex block--mobile">
<div> <div>
<label class="line"> <label class="line">
@@ -496,7 +496,7 @@
</label> </label>
</div> </div>
</div> </div>
<div class="ml-2"> <div class="ml-2 ml-0--mobile">
<label class="line" title="Toggle wrapping of long sentences onto new line"> <label class="line" title="Toggle wrapping of long sentences onto new line">
<input type="checkbox" d-change="updateSetting" data-setting="lineWrap"> Line wrap <input type="checkbox" d-change="updateSetting" data-setting="lineWrap"> Line wrap
</label> </label>

2
src/script.js
View File

@@ -2415,7 +2415,7 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
if (typeof e.target.className !== 'string') { if (typeof e.target.className !== 'string') {
return; return;
} }
if (e.target.className.indexOf('modal-overlay') !== -1) { if (e.target.classList.contains('modal-overlay') || e.target.classList.contains('modal')) {
closeAllOverlays(); closeAllOverlays();
} }
}); });

15
src/style.css
View File

@@ -90,6 +90,12 @@ p {
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
.block--mobile {
display: block;
}
.ml-0--mobile {
margin-left: 0rem;
}
.hide-on-mobile { .hide-on-mobile {
display: none !important; display: none !important;
} }
@@ -569,14 +575,11 @@ body > #demo-frame {
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; overflow-y: auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2000; z-index: 2000;
visibility: hidden; visibility: hidden;
/* So that modal overlay gets pointer events */
pointer-events: none;
} }
.modal__close-btn { .modal__close-btn {
position: absolute; position: absolute;
@@ -603,13 +606,13 @@ body > #demo-frame {
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4; line-height: 1.4;
max-width: 85vw; max-width: 85vw;
max-height: 90vh; margin: 2rem auto;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
pointer-events: auto; pointer-events: auto;
transition-property: transform, opacity; transition-property: transform, opacity;
transition-duration: 0.19s; transition-duration: 0.19s;
transform: translateY(-50px) scale(0.7); transform: translateY(50px) scale(0.95);
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
.modal__content { .modal__content {