mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-04-25 09:16:18 -04:00
Flex-wrap buttons on dialogs to prevent overflowing
This commit is contained in:
schlagmichdoch
parent
78b758b990
commit
e7031cea90
3 changed files with 59 additions and 31 deletions
|
|
@ -131,7 +131,7 @@
|
|||
<span class="descriptor-other" hidden></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center btn-row">
|
||||
<div class="center btn-row wrap">
|
||||
<div class="cancel-btn btn btn-small btn-rounded btn-dark text-white" data-i18n-key="header.cancel-share-mode" data-i18n-attrs="text"></div>
|
||||
<div class="edit-btn btn btn-small btn-rounded btn-dark text-white" data-i18n-key="header.edit-share-mode" data-i18n-attrs="text" hidden></div>
|
||||
</div>
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
<div class="row center">
|
||||
<span data-i18n-key="footer.discovery" data-i18n-attrs="text"></span>
|
||||
</div>
|
||||
<div class="row center">
|
||||
<div class="row center wrap">
|
||||
<span class="badge badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title"></span>
|
||||
<span class="badge badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden></span>
|
||||
<span class="badge badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
|
||||
|
|
@ -251,7 +251,7 @@
|
|||
<span>(Japanese)</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="center row-reverse btn-row">
|
||||
<div class="center row-reverse btn-row wrap">
|
||||
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
<p class="font-subheading center text-center" data-i18n-key="dialogs.enter-key-from-another-device" data-i18n-attrs="text"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-row row-reverse">
|
||||
<div class="btn-row row-reverse wrap">
|
||||
<button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.pair" data-i18n-attrs="text" disabled></button>
|
||||
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
|
||||
</div>
|
||||
|
|
@ -318,7 +318,7 @@
|
|||
<span data-i18n-key="dialogs.auto-accept-instructions-2" data-i18n-attrs="text"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="center row-reverse btn-row">
|
||||
<div class="center row-reverse btn-row wrap">
|
||||
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
@ -361,10 +361,12 @@
|
|||
<p class="font-subheading center text-center" data-i18n-key="dialogs.enter-room-id-from-another-device" data-i18n-attrs="text"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center row-reverse btn-row">
|
||||
<button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.join" data-i18n-attrs="text" disabled></button>
|
||||
<div class="center row-reverse btn-row wrap">
|
||||
<div class="row-reverse wrap grow-2">
|
||||
<button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.join" data-i18n-attrs="text" disabled></button>
|
||||
<button class="btn btn-rounded btn-grey leave-room" type="button" data-i18n-key="dialogs.leave" data-i18n-attrs="text"></button>
|
||||
</div>
|
||||
<button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
|
||||
<button class="btn btn-rounded btn-grey leave-room" type="button" data-i18n-key="dialogs.leave" data-i18n-attrs="text"></button>
|
||||
</div>
|
||||
</x-paper>
|
||||
</x-background>
|
||||
|
|
@ -393,7 +395,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse center btn-row">
|
||||
<div class="row-reverse center btn-row wrap">
|
||||
<button id="accept-request" class="btn btn-rounded btn-grey" title="ENTER" data-i18n-key="dialogs.accept" data-i18n-attrs="text" autofocus disabled></button>
|
||||
<button id="decline-request" class="btn btn-rounded btn-grey" title="ESCAPE" data-i18n-key="dialogs.decline" data-i18n-attrs="text"></button>
|
||||
</div>
|
||||
|
|
@ -423,7 +425,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="center file-preview"></div>
|
||||
<div class="row-reverse center btn-row">
|
||||
<div class="row-reverse center btn-row wrap">
|
||||
<button id="share-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden></button>
|
||||
<button id="download-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus disabled></button>
|
||||
<button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
|
||||
|
|
@ -452,7 +454,7 @@
|
|||
<div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-row row-reverse">
|
||||
<div class="btn-row row-reverse wrap">
|
||||
<button class="btn btn-rounded btn-grey" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.send" data-i18n-attrs="text" disabled></button>
|
||||
<button class="btn btn-rounded btn-grey" type="button" title="ESCAPE" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
|
||||
</div>
|
||||
|
|
@ -478,7 +480,7 @@
|
|||
<div id="text" class="textarea"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-reverse center btn-row">
|
||||
<div class="row-reverse center btn-row wrap">
|
||||
<button id="copy" class="btn btn-rounded btn-grey" title="CTRL/⌘ + C" data-i18n-key="dialogs.copy" data-i18n-attrs="text"></button>
|
||||
<button id="close" class="btn btn-rounded btn-grey" title="ESCAPE" data-i18n-key="dialogs.close" data-i18n-attrs="text"></button>
|
||||
</div>
|
||||
|
|
@ -511,7 +513,7 @@
|
|||
<div class="slider round"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="btn-row row-reverse">
|
||||
<div class="btn-row row-reverse wrap">
|
||||
<button class="btn btn-rounded btn-grey" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.approve" data-i18n-attrs="text" autofocus disabled></button>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
@ -528,7 +530,7 @@
|
|||
<button class="btn btn-rounded btn-grey center" id="base64-paste-btn" title="Paste"></button>
|
||||
<div class="textarea" title="CMD/⌘ + V" contenteditable hidden></div>
|
||||
</div>
|
||||
<div class="row-reverse center btn-row">
|
||||
<div class="row-reverse center btn-row wrap">
|
||||
<button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
|
||||
</div>
|
||||
</x-paper>
|
||||
|
|
|
|||
|
|
@ -388,6 +388,10 @@ x-dialog a {
|
|||
|
||||
/* Pair Devices Dialog & Public Room Dialog */
|
||||
|
||||
#public-room-dialog x-paper {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.input-key-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -544,18 +548,14 @@ x-dialog hr {
|
|||
}
|
||||
|
||||
/* button row*/
|
||||
.btn-row > .btn {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-row > .btn {
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
.btn-row .btn {
|
||||
margin: 3px;
|
||||
flex-grow: 1;
|
||||
height: 50px;
|
||||
width: 120px; /* fixed width needed to ensure same width for all buttons */
|
||||
}
|
||||
|
||||
x-paper > .btn-row {
|
||||
height: 50px;
|
||||
margin: 5px 10px 10px;
|
||||
}
|
||||
|
||||
|
|
@ -638,10 +638,11 @@ x-dialog .dialog-subheader {
|
|||
}
|
||||
|
||||
.share-panel {
|
||||
min-width: 250px;
|
||||
max-width: calc(100vw - 20px);
|
||||
overflow: hidden;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
background-color: var(--primary-color);
|
||||
background-image: linear-gradient(225deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 60%, black) 100%);
|
||||
}
|
||||
|
||||
|
|
@ -677,6 +678,10 @@ x-dialog .dialog-subheader {
|
|||
background-position: center;
|
||||
}
|
||||
|
||||
.share-panel .btn {
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.share-descriptor {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,16 +48,36 @@ html {
|
|||
}
|
||||
|
||||
.m1 {
|
||||
margin: 10px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.cursive {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.row-reverse {
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wrap-reverse {
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.grow {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.grow-2 {
|
||||
display: flex;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.shrink {
|
||||
display: flex;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.flex {
|
||||
|
|
@ -81,6 +101,11 @@ html {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.row-reverse {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -92,10 +117,6 @@ html {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.full {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue