RouterUI/router-ui-frontend
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

FileShare icon added, links added, indicator classes added

Browse source
This commit is contained in:
Patrick Hatsune 2024-08-31 03:20:27 -07:00
parent c6df451e7d
commit ce6e3c9b70
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
3 changed files with 98 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/pages/basicDashboard/Overview.vue
View file

@ -2,6 +2,7 @@
<div id="overviewComponent">
<h2 class="title">Overview</h2>
<ul>
<RouterLink to="/basic/wireless">
<li>
<svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-2.1685 -3.7025)">
@ -15,8 +16,10 @@
</g>
</svg>
<h3>Internet</h3>
<span style="background-color: var(--good-indicator);">Online: LAN4</span>
<span class="good-indicator">Online: LAN4</span>
</li>
</RouterLink>
<RouterLink to="/basic/wireless">
<li>
<svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-2.0001 -17.685)">
@ -29,10 +32,12 @@
</g>
</svg>
<h3>Wifi</h3>
<span style="background-color: var(--warning-indicator);">
<span class="warning-indicator">
5Ghz: On | 2.4Ghz: Off
</span>
</li>
</RouterLink>
<RouterLink to="/basic/devices">
<li>
<svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-7.2896 -15.784)">
@ -51,24 +56,40 @@
</h3>
<span>Online: 0</span>
</li>
</RouterLink>
<RouterLink to="/basic/fileshare">
<li>
<svg version="1.1" viewBox="0 0 101.73 101.73" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-6.5281 -12.557)">
<g transform="matrix(.89724 -.89724 .73751 .73751 -43.308 62.468)">
<rect x="17.713" y="51.062" width="60.612" height="35.705" ry="1.493" fill="none" stroke="#fff" stroke-width="7.6729"/>
<rect x="78.329" y="58.538" width="21.201" height="20.755" ry="1.3525" fill="none" stroke="#fff" stroke-width="7.6729"/>
<rect x="29.763" y="52.955" width="6.9565" height="31.921" ry=".027657" fill="#fff" stroke-width="0"/>
</g>
</g>
</svg>
<h3>
File Sharing
</h3>
<span style="background-color: var(--bad-indicator);">Offline</span>
<span class="bad-indicator">Offline</span>
</li>
</RouterLink>
<RouterLink to="/basic/QoS">
<li>
<h3>
QoS
</h3>
<span style="background-color: var(--good-indicator);">Online</span>
<span class="good-indicator">Online</span>
</li>
</RouterLink>
<RouterLink to="/basic/guestnetwork">
<li>
<h3>
Guest Network
</h3>
<span style="background-color: var(--bad-indicator);">Offline</span>
<span class="bad-indicator">Offline</span>
</li>
</RouterLink>
</ul>
</div>
</template>

7
src/styles/basicDashboard.css
View file

@ -67,7 +67,7 @@
max-width: 730px;
li {
display: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@ -77,10 +77,6 @@
width: 230px;
border-radius: 20px;
cursor: pointer;
transition: 0.3s background-color;
}
li:hover {
background-color: var(--dark-alt-highlight-color);
}
img {
width: 80px;
@ -93,6 +89,7 @@
span {
width: 100%;
height: 30px;
margin-top: 5px;
background-color: var(--neutral-indicator);
border-radius: var(--alt-border-radius);
text-align: center;

12
src/styles/main.css
View file

@ -109,3 +109,15 @@ a {
justify-content: center;
flex-grow: 1;
}
.good-indicator {
background-color: var(--good-indicator) !important;
}
.warning-indicator {
background-color: var(--warning-indicator) !important;
}
.bad-indicator {
background-color: var(--bad-indicator) !important;
}