Skip to content

fusiondirectory
fusiondirectory
Verified Commit fb33328b authored by Côme Chilliet's avatar Côme Chilliet
Browse files
Options

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

issue #6069
parent e1809817
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 33 deletions
html/themes/breezy/dialog.css
View file @ fb33328b
div.msgbackground {
position: absolute;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
......@@ -13,15 +13,26 @@ div.msgtrace {
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
div.msgtitle {
width: auto;
background-color: #f0f0f0;
border: solid 1px #c0c2c3;
margin-bottom: 7px;
}
div.msgtitle h2 {
margin: 10px;
text-align: center;
border-bottom: 1px solid #c0c2c3;
padding: 8px;
background-color: #eff0f1;
min-height: 30px;
}
div.msgtitle > img {
float: left;
height: 30px;
}
div.msgtitle > p {
margin: 0;
padding: 0;
font-size: 24px;
font-weight: bold;
}
div.msgdialog {
width: 60%;
......@@ -29,11 +40,17 @@ div.msgdialog {
position: relative;
display: none;
margin: auto;
padding: 0;
top: 200px;
border: 1px solid #c0c2c3;
background-color: #f3f4f4;
}
div.msgdialog div.msgcontent {
z-index: 250;
width: 100%;
z-index: 250;
}
div.msgdialog div.msgcontent p {
padding: 10px;
}
div.msgdialog .description {
font-style: italic;
......@@ -50,6 +67,19 @@ div.msgdialog .description {
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,
.notice,
.success,
......
html/themes/breezy/less/dialog.less
View file @ fb33328b
@import "colors";
div.msgbackground {
position: absolute;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
......@@ -16,29 +16,46 @@ div.msgtrace {
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
div.msgtitle {
width: auto;
background-color: @background-header-color;
border: solid 1px @border-color-1;
margin-bottom: 7px;
h2 {
margin: 10px;
text-align: center;
border-bottom: 1px solid @border-color-1;
padding: 8px;
background-color: @background-color;
min-height: 30px;
> img {
float: left;
height: 30px;
}
> p {
margin: 0;
padding: 0;
font-size: @titlebar-font-size;
font-weight: bold;
}
}
div.msgdialog {
div.msgcontent {
z-index: 250;
width: 100%;
z-index: 250;
p {
padding: 10px;
}
}
width: 60%;
z-index: 150;
position: relative;
display: none;
margin: auto;
padding: 0;
top: 200px;
border: 1px solid @border-color-1;
background-color: @background-second-color;
.description {
font-style: italic;
}
......@@ -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 {
border: 2px solid @border-color-1;
margin: .2em;
......
ihtml/themes/breezy/msg_dialog.tpl
View file @ fb33328b
......@@ -12,31 +12,27 @@
</div>
{/if}
{if $dialog.type == $smarty.const.INFO_DIALOG || $dialog.type == $smarty.const.CONFIRM_DIALOG}
<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_layer{$dialog.id}" class="msgdialog">
<div id="e_layerTitle{$dialog.id}" class="msgtitle">
<h2>
{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}"/>
{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}"/>
{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}"/>
{/if}
<p>
{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}"/>
{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}"/>
{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}"/>
{/if}
{$dialog.title}
</h2>
</p>
</div>
<div class="msgcontent">
{$dialog.message}
<p>
{$dialog.message}
</p>
</div>
<div class="plugbottom">
<div class="plugbottom msgfooter">
{if ($dialog.trace != "")}
<input type="button" id="Trace" name="Trace"
onClick="$('trace_{$dialog.id}').toggle();" value="{t}Trace{/t}"/>
......
Markdown is supported
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