Skip to content
GitLab
Unverified Commit fb33328b authored by Côme Chilliet's avatar Côme Chilliet
Browse files

:lipstick: fix(dialogs) Change dialog styling to match login style in breezy 

issue #6069
parent e1809817
dev 6342-update-the-locales-for-1-5 6344-template-issue-when-creating-a-template-with-empty-password-error-message-should-not-be-seen 6365-core-locking-mechanism-is-not-changing-the-mail-ressource-it-does-lock-the-mail-account 6365-core-when-lock-mechanism-is-trigger-the-user-should-not-be-editable-if-not-unlock 6378-orcid-test-method-is-wrong-and-break-orcid-saving core-php8 master fusiondirectory-1.5 fusiondirectory-1.4
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 88 additions and 33 deletions
+88 -33
html/themes/breezy/dialog.css
+ 38
− 8
View file @ fb33328b
div.msgbackground { div.msgbackground {
position: absolute; position: fixed;
left: 0px; left: 0px;
top: 0px; top: 0px;
right: 0px; right: 0px;
...@@ -13,15 +13,26 @@ div.msgtrace { ...@@ -13,15 +13,26 @@ div.msgtrace {
left: 0px; left: 0px;
top: 0px; top: 0px;
right: 0px; right: 0px;
bottom: 0px;
overflow-y: auto;
} }
div.msgtitle { div.msgtitle {
width: auto; width: auto;
background-color: #f0f0f0; text-align: center;
border: solid 1px #c0c2c3; border-bottom: 1px solid #c0c2c3;
margin-bottom: 7px; padding: 8px;
} background-color: #eff0f1;
div.msgtitle h2 { min-height: 30px;
margin: 10px; }
div.msgtitle > img {
float: left;
height: 30px;
}
div.msgtitle > p {
margin: 0;
padding: 0;
font-size: 24px;
font-weight: bold;
} }
div.msgdialog { div.msgdialog {
width: 60%; width: 60%;
...@@ -29,11 +40,17 @@ div.msgdialog { ...@@ -29,11 +40,17 @@ div.msgdialog {
position: relative; position: relative;
display: none; display: none;
margin: auto; margin: auto;
padding: 0;
top: 200px; top: 200px;
border: 1px solid #c0c2c3;
background-color: #f3f4f4;
} }
div.msgdialog div.msgcontent { div.msgdialog div.msgcontent {
z-index: 250;
width: 100%; width: 100%;
z-index: 250;
}
div.msgdialog div.msgcontent p {
padding: 10px;
} }
div.msgdialog .description { div.msgdialog .description {
font-style: italic; font-style: italic;
...@@ -50,6 +67,19 @@ div.msgdialog .description { ...@@ -50,6 +67,19 @@ div.msgdialog .description {
width: auto; width: auto;
} }
} }
div.msgfooter {
width: auto;
padding: 1%;
}
@media (max-width: 640px) {
div.msgfooter {
padding: 5px;
text-align: center !important;
}
div.msgfooter.plugbottom > input[type=submit] {
width: 100% !important;
}
}
.error, .error,
.notice, .notice,
.success, .success,
......
html/themes/breezy/less/dialog.less
+ 36
− 7
View file @ fb33328b
@import "colors"; @import "colors";
div.msgbackground { div.msgbackground {
position: absolute; position: fixed;
left: 0px; left: 0px;
top: 0px; top: 0px;
right: 0px; right: 0px;
...@@ -16,29 +16,46 @@ div.msgtrace { ...@@ -16,29 +16,46 @@ div.msgtrace {
left: 0px; left: 0px;
top: 0px; top: 0px;
right: 0px; right: 0px;
bottom: 0px;
overflow-y: auto;
} }
div.msgtitle { div.msgtitle {
width: auto; width: auto;
background-color: @background-header-color; text-align: center;
border: solid 1px @border-color-1; border-bottom: 1px solid @border-color-1;
margin-bottom: 7px; padding: 8px;
h2 { background-color: @background-color;
margin: 10px; min-height: 30px;
> img {
float: left;
height: 30px;
}
> p {
margin: 0;
padding: 0;
font-size: @titlebar-font-size;
font-weight: bold;
} }
} }
div.msgdialog { div.msgdialog {
div.msgcontent { div.msgcontent {
z-index: 250;
width: 100%; width: 100%;
z-index: 250;
p {
padding: 10px;
}
} }
width: 60%; width: 60%;
z-index: 150; z-index: 150;
position: relative; position: relative;
display: none; display: none;
margin: auto; margin: auto;
padding: 0;
top: 200px; top: 200px;
border: 1px solid @border-color-1;
background-color: @background-second-color;
.description { .description {
font-style: italic; font-style: italic;
} }
...@@ -54,6 +71,18 @@ div.msgdialog { ...@@ -54,6 +71,18 @@ div.msgdialog {
} }
} }
div.msgfooter {
width: auto;
padding: 1%;
@media (max-width: 640px) {
padding: 5px;
text-align: center !important;
&.plugbottom > input[type=submit] {
width: 100% !important;
}
}
}
.error, .notice, .success, .info { .error, .notice, .success, .info {
border: 2px solid @border-color-1; border: 2px solid @border-color-1;
margin: .2em; margin: .2em;
......
ihtml/themes/breezy/msg_dialog.tpl
+ 14
− 18
View file @ fb33328b
...@@ -12,31 +12,27 @@ ...@@ -12,31 +12,27 @@
</div> </div>
{/if} {/if}
{if $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG} <div id="e_layer{$dialog.id}" class="msgdialog">
<div id="e_layer{$dialog.id}" class="info msgdialog">
{elseif $dialog.type == $smarty.const.WARNING_DIALOG}
<div id="e_layer{$dialog.id}" class="notice msgdialog">
{else}
<div id="e_layer{$dialog.id}" class="error msgdialog">
{/if}
<div id="e_layerTitle{$dialog.id}" class="msgtitle"> <div id="e_layerTitle{$dialog.id}" class="msgtitle">
<h2> <p>
{if $dialog.type == $smarty.const.ERROR_DIALOG} {if $dialog.type == $smarty.const.ERROR_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-error&amp;size=32" class="center" alt="{t}Error{/t}"/> <img src="geticon.php?context=status&amp;icon=dialog-error&amp;size=32" class="center" alt="{t}Error{/t}"/>
{elseif $dialog.type == $smarty.const.WARNING_DIALOG} {elseif $dialog.type == $smarty.const.WARNING_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-warning&amp;size=32" class="center" alt="{t}Warning{/t}"/> <img src="geticon.php?context=status&amp;icon=dialog-warning&amp;size=32" class="center" alt="{t}Warning{/t}"/>
{elseif $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG} {elseif $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG}
<img src="geticon.php?context=status&amp;icon=dialog-information&amp;size=32" class="center" alt="{t}Information{/t}"/> <img src="geticon.php?context=status&amp;icon=dialog-information&amp;size=32" class="center" alt="{t}Information{/t}"/>
{/if} {/if}
{$dialog.title} {$dialog.title}
</h2> </p>
</div> </div>
<div class="msgcontent"> <div class="msgcontent">
{$dialog.message} <p>
{$dialog.message}
</p>
</div> </div>
<div class="plugbottom"> <div class="plugbottom msgfooter">
{if ($dialog.trace != "")} {if ($dialog.trace != "")}
<input type="button" id="Trace" name="Trace" <input type="button" id="Trace" name="Trace"
onClick="$('trace_{$dialog.id}').toggle();" value="{t}Trace{/t}"/> onClick="$('trace_{$dialog.id}').toggle();" value="{t}Trace{/t}"/>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment