mirror of
https://github.com/unraid/webgui.git
synced 2026-05-05 20:00:52 -05:00
fix: panels spacing + user list for responsiveness
This commit is contained in:
Zack Spear
@@ -13,26 +13,48 @@ Tag="users"
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*/
|
||||
?>
|
||||
<?
|
||||
ksort($users);
|
||||
?>
|
||||
<div id="title" class="title"><span class="left"><i class="fa fa-bell title"></i>_(Management Access)_</span></div>
|
||||
<?$img = "/boot/config/plugins/dynamix/users/root.png"?>
|
||||
<div class="user-list" style="text-align:center"><a class="<?=(!empty($users['root']['desc']) ? 'info' : '')?>" href="/<?=$path?>/UserEdit?name=root"><img src="<?=(file_exists($img) ? autov($img) : '/webGui/images/user.png')?>" class="picture" border="0" width="48" height="48"><br>root<span><?=htmlspecialchars($users['root']['desc'])?></span></a></div>
|
||||
|
||||
<div class="title"><span class="left"><i class="fa fa-cloud title"></i>_(Shares Access)_</span></div>
|
||||
<?foreach ($users as $user):?>
|
||||
<?if ($user['name'] == 'root') continue;?>
|
||||
<?$img = "/boot/config/plugins/dynamix/users/{$user['name']}.png"?>
|
||||
<div class="user-list" style="text-align:center"><a class="<?=(!empty($user['desc']) ? 'info' : '')?>" href="/<?=$path?>/UserEdit?name=<?=htmlspecialchars(urlencode($user['name']))?>"><img src="<?=(file_exists($img) ? autov($img) : '/webGui/images/user.png')?>" class="picture" border="0" width="48" height="48"><br><?=htmlspecialchars($user['name'])?><span><?=htmlspecialchars($user['desc'])?></span></a></div>
|
||||
<?endforeach;?>
|
||||
|
||||
<?if (count($users)==1):?>
|
||||
_(No users are defined)_. _(Click **Add User** to create a user for remote shares access)_
|
||||
<div id="title" class="title">
|
||||
<span class="left">
|
||||
<i class="fa fa-bell title"></i>_(Management Access)_
|
||||
</span>
|
||||
</div>
|
||||
<div class="Panels">
|
||||
<?$img = "/boot/config/plugins/dynamix/users/root.png"?>
|
||||
<div class="user-list" style="text-align:center">
|
||||
<a class="<?=(!empty($users['root']['desc']) ? 'info' : '')?>" href="/<?=$path?>/UserEdit?name=root">
|
||||
<img src="<?=(file_exists($img) ? autov($img) : '/webGui/images/user.png')?>" class="picture" border="0" width="48" height="48">
|
||||
<br>
|
||||
root
|
||||
<span><?=htmlspecialchars($users['root']['desc'])?></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="left">
|
||||
<i class="fa fa-cloud title"></i>_(Shares Access)_
|
||||
</span>
|
||||
</div>
|
||||
<?if (count($users) == 1):?>
|
||||
<p>_(No users are defined)_. _(Click **Add User** to create a user for remote shares access)_</p>
|
||||
<?else:?>
|
||||
<div class="Panels">
|
||||
<?foreach ($users as $user):?>
|
||||
<?if ($user['name'] == 'root') continue;?>
|
||||
<?$img = "/boot/config/plugins/dynamix/users/{$user['name']}.png"?>
|
||||
<div class="user-list" style="text-align:center">
|
||||
<a class="<?=(!empty($user['desc']) ? 'info' : '')?>" href="/<?=$path?>/UserEdit?name=<?=htmlspecialchars(urlencode($user['name']))?>">
|
||||
<img src="<?=(file_exists($img) ? autov($img) : '/webGui/images/user.png')?>" class="picture" border="0" width="48" height="48">
|
||||
<br>
|
||||
<?=htmlspecialchars($user['name'])?>
|
||||
<span><?=htmlspecialchars($user['desc'])?></span>
|
||||
</a>
|
||||
</div>
|
||||
<?endforeach;?>
|
||||
</div>
|
||||
<?endif;?>
|
||||
|
||||
<div style='clear:both'></div>
|
||||
<form method="POST" action="/<?=$path?>/UserAdd">
|
||||
<input type="submit" value="_(Add User)_"><input type="button" value="_(Done)_" onclick="done()">
|
||||
<input type="submit" value="_(Add User)_">
|
||||
<input type="button" value="_(Done)_" onclick="done()">
|
||||
</form>
|
||||
|
||||
@@ -85,7 +85,7 @@ function generatePanels($page, $path, $defaultIcon, $docroot, $useTabCookie = fa
|
||||
foreach ($pgs as $pg) {
|
||||
$output .= generatePanel($pg, $path, $defaultIcon, $docroot, $useTabCookie);
|
||||
}
|
||||
return $output;
|
||||
return '<div class="Panels">'.$output.'</div>';
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,11 +1,46 @@
|
||||
a.info span {
|
||||
top: 66px;
|
||||
left: 42px;
|
||||
}
|
||||
.user-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 10rem;
|
||||
max-width: 15rem;
|
||||
word-break: break-all;
|
||||
background-color: var(--mild-background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: .5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.Theme--black,
|
||||
.Theme--white {
|
||||
div#title {
|
||||
margin-top: -30px !important;
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.info span {
|
||||
top: 66px;
|
||||
left: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
max-width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.Theme--sidebar {
|
||||
.user-list {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--table-alt-border-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--opac-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -442,7 +442,7 @@ a[href="/Tools/Downgrade"] .icon-update:before {
|
||||
margin-right: 4px;
|
||||
}
|
||||
div.title {
|
||||
margin: 20px 0 32px 0;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 8px 10px;
|
||||
clear: both;
|
||||
border-bottom: 1px solid var(--table-border-color);
|
||||
@@ -450,6 +450,11 @@ div.title {
|
||||
letter-spacing: 1.8px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.title + .title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* div.title span.left {
|
||||
font-size: 1.4rem;
|
||||
} */
|
||||
@@ -1217,50 +1222,51 @@ a.list {
|
||||
.tabs button[role="tab"]:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
div.Panel {
|
||||
|
||||
.Panels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 3rem;
|
||||
row-gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.Panel {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
float: left;
|
||||
margin: 0 0 30px 10px;
|
||||
padding-right: 50px;
|
||||
height: 8rem;
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.PanelText {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.Panel a {
|
||||
text-decoration: none;
|
||||
}
|
||||
div.Panel span {
|
||||
height: 42px;
|
||||
display: block;
|
||||
}
|
||||
div.Panel:hover .PanelText {
|
||||
text-decoration: underline;
|
||||
}
|
||||
div.Panel img.PanelImg {
|
||||
.PanelImg {
|
||||
width: auto;
|
||||
max-width: 32px;
|
||||
height: 32px;
|
||||
max-width: 33px;
|
||||
height: 33px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
div.Panel i.PanelIcon {
|
||||
font-size: 32px;
|
||||
.PanelIcon {
|
||||
color: var(--text-color);
|
||||
font-size: 32px; /* Results in height of 33px... */
|
||||
line-height: 1;
|
||||
}
|
||||
div.user-list {
|
||||
float: left;
|
||||
padding: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
line-height: 2rem;
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
background-color: var(--mild-background-color);
|
||||
}
|
||||
div.user-list img {
|
||||
width: auto;
|
||||
max-width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
div.up {
|
||||
margin-top: -30px;
|
||||
border: 1px solid var(--border-color);
|
||||
@@ -2143,61 +2149,10 @@ span#wlan0 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.Panel {
|
||||
width: 25%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
border-right: var(--table-alt-border-color) 1px solid;
|
||||
border-bottom: 1px solid var(--table-alt-border-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div.Panel:hover {
|
||||
background-color: var(--mild-background-color);
|
||||
}
|
||||
|
||||
div.Panel a {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
div.Panel span {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.Panel br,
|
||||
.vmtemplate br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.Panel img.PanelImg {
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
div.Panel i.PanelIcon {
|
||||
float: left;
|
||||
color: var(--text-color);
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
div.Panel .PanelText {
|
||||
font-size: 1.4rem;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.user-list {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--table-alt-border-color);
|
||||
}
|
||||
|
||||
div.user-list:hover {
|
||||
background-color: var(--opac-background-color);
|
||||
}
|
||||
div.vmheader {
|
||||
display: block;
|
||||
clear: both;
|
||||
@@ -2262,6 +2217,10 @@ span#wlan0 {
|
||||
padding: 0 1rem 4rem;
|
||||
}
|
||||
|
||||
.Theme--sidebar #displaybox {
|
||||
padding-left: 8rem;
|
||||
}
|
||||
|
||||
/* Theme width styles */
|
||||
.Theme--width-boxed #displaybox {
|
||||
min-width: 1280px;
|
||||
|
||||
Reference in New Issue
Block a user