Skip to content

Commit 3b2c321

Browse files
snadrussnadrus
authored
left-sidebar (#176)
* left-sidebar * style stuff
1 parent 99d31f1 commit 3b2c321

File tree

2 files changed

+182
-54
lines changed

2 files changed

+182
-54
lines changed

‎web/static/ux/curio-ux.mjs‎

Lines changed: 172 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {LitElement, css, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
1+
import { LitElement, css, html } from 'https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js';
22

33
//import 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.js';
44

@@ -8,17 +8,77 @@ class CurioUX extends LitElement {
88
\ .curio-slot {
99
}
1010
:host {
11-
display: block;
12-
margin: 2px 3px;
11+
display: flex;
12+
margin: 0;
1313
}
1414
15+
.bi {
16+
vertical-align: -.125em;
17+
pointer-events: none;
18+
fill: currentColor;
19+
}
20+
21+
.dropdown-toggle { outline: 0; }
22+
23+
.nav-flush .nav-link {
24+
border-radius: 0;
25+
}
26+
27+
.btn-toggle {
28+
display: inline-flex;
29+
align-items: center;
30+
padding: .25rem .5rem;
31+
font-weight: 600;
32+
color: rgba(0, 0, 0, .65);
33+
background-color: transparent;
34+
border: 0;
35+
}
36+
.btn-toggle:hover,
37+
.btn-toggle:focus {
38+
color: rgba(0, 0, 0, .85);
39+
background-color: #d2f4ea;
40+
}
41+
42+
.btn-toggle::before {
43+
width: 1.25em;
44+
line-height: 0;
45+
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
46+
transition: transform .35s ease;
47+
transform-origin: .5em 50%;
48+
}
49+
50+
.btn-toggle[aria-expanded="true"] {
51+
color: rgba(0, 0, 0, .85);
52+
}
53+
.btn-toggle[aria-expanded="true"]::before {
54+
transform: rotate(90deg);
55+
}
56+
57+
.btn-toggle-nav a {
58+
display: inline-flex;
59+
padding: .1875rem .5rem;
60+
margin-top: .125rem;
61+
margin-left: 1.25rem;
62+
text-decoration: none;
63+
}
64+
.btn-toggle-nav a:hover,
65+
.btn-toggle-nav a:focus {
66+
background-color: #d2f4ea;
67+
}
68+
69+
.scrollarea {
70+
overflow-y: auto;
71+
}
72+
73+
.fw-semibold { font-weight: 600; }
74+
.lh-tight { line-height: 1.25; }
1575
`;
16-
connectedCallback() {
17-
super.connectedCallback();
18-
//"https://unpkg.com/@cds/core/global.min.css",
19-
//"https://unpkg.com/@cds/city/css/bundles/default.min.css",
20-
//"https://unpkg.com/@cds/core/styles/theme.dark.min.css",
21-
//"https://unpkg.com/@clr/ui/clr-ui.min.css",
76+
connectedCallback() {
77+
super.connectedCallback();
78+
//"https://unpkg.com/@cds/core/global.min.css",
79+
//"https://unpkg.com/@cds/city/css/bundles/default.min.css",
80+
//"https://unpkg.com/@cds/core/styles/theme.dark.min.css",
81+
//"https://unpkg.com/@clr/ui/clr-ui.min.css",
2282

2383
document.head.innerHTML += `
2484
<meta charset="utf-8">
@@ -34,58 +94,118 @@ class CurioUX extends LitElement {
3494
document.documentElement.classList.add('dark');
3595

3696
this.messsage = this.getCookieMessage();
97+
98+
var s = document.body.style;
99+
s.padding = 0;
37100
}
38101

39102
render() {
103+
var active = window.location.pathname;
40104
return html`
41-
<div>
42105
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
43-
<nav class="navbar navbar-expand-lg navbar-expand-sm navbar-dark bg-dark">
44-
<div class="container-fluid">
45-
<a class="navbar-brand" href="/">
46-
<img src="/favicon.svg" width="30" height="30" class="d-inline-block align-top" alt="">
47-
Curio Cluster
106+
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
107+
<symbol id="bootstrap" viewBox="0 0 118 94">
108+
<title>Bootstrap</title>
109+
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
110+
</symbol>
111+
<symbol id="home" viewBox="0 0 16 16">
112+
<path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"></path>
113+
</symbol>
114+
<symbol id="speedometer2" viewBox="0 0 16 16">
115+
<path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"></path>
116+
<path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"></path>
117+
</symbol>
118+
<symbol id="people-circle" viewBox="0 0 16 16">
119+
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
120+
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"></path>
121+
</symbol>
122+
<symbol id="grid" viewBox="0 0 16 16">
123+
<path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"></path>
124+
</symbol>
125+
<symbol id="table" viewBox="0 0 16 16">
126+
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"></path>
127+
</symbol>
128+
</svg>
129+
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 200px; min-height:100vh; margin-right: 1rem">
130+
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
131+
<img src="/favicon.svg" width="40" height="32" class="d-inline-block align-top me-2" alt="">
132+
<span class="fs-4">Curio</span>
48133
</a>
49-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
50-
<span class="navbar-toggler-icon"></span>
51-
</button>
52-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
53-
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
54-
<li class="nav-item">
55-
<a class="nav-link" href="/">Home</a>
56-
</li>
57-
<li class="nav-item">
58-
<a class="nav-link" href="/config/">Configurations</a>
59-
</li>
60-
<li class="nav-item">
61-
<a class="nav-link" href="/sector/">Sectors</a>
62-
</li>
63-
<li class="nav-item">
64-
<a class="nav-link" href="/pages/pipeline_porep/">PoRep</a>
65-
</li>
66-
<li class="nav-item">
67-
<a class="nav-link" href="/snap/">Snap</a>
68-
</li>
69-
<li class="nav-items">
70-
<a class="nav-link" href="/deals/">Deals</a>
71-
</li>
72-
<li>
73-
<hr class="dropdown-divider">
74-
</li>
75-
<li class="nav-item">
76-
<a class="nav-link" href="https://lotus.filecoin.io/storage-providers/curio/overview/" target="_blank">Documentation</a>
77-
</li>
78-
</ul>
79-
</div>
80-
</div>
81-
</nav>
82-
${this.message? html`<div class="alert alert-primary" role="alert">${this.message}</div>`: html``}
83-
<slot class="curio-slot"></slot>
84-
</div>
134+
<hr>
135+
<ul class="nav nav-pills flex-column mb-auto">
136+
<li class="nav-item">
137+
<a href="/" class="nav-link text-white ${active=='/'? 'active':''}" aria-current="page">
138+
<svg class="bi me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
139+
<span>Overview</span>
140+
</a>
141+
</li>
142+
<li>
143+
<a href="/config/" class="nav-link text-white ${active=='/config/'? 'active':''}">
144+
<svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
145+
<span>Configurations</span>
146+
</a>
147+
</li>
148+
<li>
149+
<a href="/sector/" class="nav-link text-white ${active=='/sector/'? 'active':''}">
150+
<svg class="bi me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
151+
<span>Sectors</span>
152+
</a>
153+
</li>
154+
<li>
155+
<a href="/pages/pipeline_porep/" class="nav-link text-white ${active=='/pages/pipeline_porep/'? 'active':''}">
156+
<svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
157+
<span>PoRep</span>
158+
</a>
159+
</li>
160+
<li>
161+
<a href="/snap/" class="nav-link text-white ${active=='/snap/'? 'active':''}">
162+
<svg class="bi me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-backpack" viewBox="0 0 16 16">
163+
<path d="M4.04 7.43a4 4 0 0 1 7.92 0 .5.5 0 1 1-.99.14 3 3 0 0 0-5.94 0 .5.5 0 1 1-.99-.14M4 9.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5zm1 .5v3h6v-3h-1v.5a.5.5 0 0 1-1 0V10z"/>
164+
<path d="M6 2.341V2a2 2 0 1 1 4 0v.341c2.33.824 4 3.047 4 5.659v5.5a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 13.5V8a6 6 0 0 1 4-5.659M7 2v.083a6 6 0 0 1 2 0V2a1 1 0 0 0-2 0m1 1a5 5 0 0 0-5 5v5.5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5V8a5 5 0 0 0-5-5"/>
165+
</svg>
166+
<span>Snap</span>
167+
</a>
168+
</li>
169+
<li>
170+
<a href="/deals/" class="nav-link text-white ${active=='/deals/'? 'active':''}">
171+
<svg class="bi me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bicycle" viewBox="0 0 16 16">
172+
<path d="M4 4.5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 1 0 1v.5h4.14l.386-1.158A.5.5 0 0 1 11 4h1a.5.5 0 0 1 0 1h-.64l-.311.935.807 1.29a3 3 0 1 1-.848.53l-.508-.812-2.076 3.322A.5.5 0 0 1 8 10.5H5.959a3 3 0 1 1-1.815-3.274L5 5.856V5h-.5a.5.5 0 0 1-.5-.5m1.5 2.443-.508.814c.5.444.85 1.054.967 1.743h1.139zM8 9.057 9.598 6.5H6.402zM4.937 9.5a2 2 0 0 0-.487-.877l-.548.877zM3.603 8.092A2 2 0 1 0 4.937 10.5H3a.5.5 0 0 1-.424-.765zm7.947.53a2 2 0 1 0 .848-.53l1.026 1.643a.5.5 0 1 1-.848.53z"/>
173+
</svg>
174+
<span>Deals</span>
175+
</a>
176+
</li>
177+
<li>
178+
<a href="https://docs.curiostorage.org/" target="_blank" class="nav-link text-white">
179+
<svg class="bi me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16">
180+
<path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
181+
</svg>
182+
<span>Docs</span>
183+
</a>
184+
</li>
185+
</ul>
186+
<!--
187+
<hr>
188+
<div class="dropdown">
189+
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
190+
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
191+
<strong>mdo</strong>
192+
</a>
193+
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
194+
<li><a class="dropdown-item" href="#">New project...</a></li>
195+
<li><a class="dropdown-item" href="#">Settings</a></li>
196+
<li><a class="dropdown-item" href="#">Profile</a></li>
197+
<li><hr class="dropdown-divider"></li>
198+
<li><a class="dropdown-item" href="#">Sign out</a></li>
199+
</ul>
200+
</div>
201+
-->
202+
</div>
85203
204+
${this.message ? html`<div class="alert alert-primary" role="alert">${this.message}</div>` : html``}
205+
<slot class="curio-slot"></slot>
86206
`;
87207
}
88-
208+
89209
getCookieMessage() {
90210
const name = 'message';
91211
const cookies = document.cookie.split(';');

‎web/static/ux/main.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,24 @@ html {
77

88
body {
99
margin: 0;
10-
padding: 3px 4px;
1110
background: rgb(11, 22, 34);
11+
font-family: Metropolis, monospace;
12+
font-weight: 400;
13+
}
14+
15+
* {
16+
font-weight: 400;
17+
}
18+
h1,h2,h3,h4,h5,h6 {
19+
font-weight: 400;
1220
}
1321

1422
curio-ux {
1523
/* To resemble Clarity Design */
1624
color: rgb(227, 234, 237);
1725
font-family: Metropolis, monospace;
1826
font-weight: 400;
19-
background: rgb(11, 22, 34);
27+
background: RGB(54, 57, 63);
2028
}
2129

2230

0 commit comments

Comments
 (0)