basic template

This commit is contained in:
Nazar Kanaev 2020-06-12 15:03:20 +01:00
commit 0c711c5825
11 changed files with 134 additions and 0 deletions

76
template/index.html Normal file
View File

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./static/stylesheets/bootstrap.min.css">
<link rel="stylesheet" href="./static/stylesheets/app.css">
<script src="./static/javascripts/vue.min.js"></script>
<script src="./static/javascripts/app.js"></script>
</head>
<body>
<div class="wrapper d-flex vh-100">
<div class="vh-100 overflow-auto border-right" style="width: 300px;">
<div class="mx-2 my-2">
<div class="mb-4">
<div class="nav-item d-flex align-items-center w-100">
<img src="./static/images/circle-full.svg" alt="" class="nav-icon">
<span class="flex-fill text-left text-truncate">All</span>
<span class="counter text-right"></span>
</div>
<div class="nav-item d-flex align-items-center w-100">
<img src="./static/images/circle.svg" alt="" class="nav-icon">
<span class="flex-fill text-left text-truncate">Unread</span>
<span class="counter text-right"></span>
</div>
<div class="nav-item d-flex align-items-center w-100">
<img src="./static/images/star.svg" alt="" class="nav-icon">
<span class="flex-fill text-left text-truncate">Starred</span>
<span class="counter text-right">50</span>
</div>
</div>
<div>
<div class="folder">
<div class="nav-item d-flex align-items-center w-100">
<img src="./static/images/chevron-down.svg" alt="" class="nav-icon">
<span class="flex-fill text-left text-truncate">News</span>
<span class="counter text-right"></span>
</div>
<div>
<div class="nav-item d-flex align-items-center w-100">
<img src="" alt="" class="nav-icon">
<span class="flex-fill text-left text-truncate">news.ycombinator.com</span>
<span class="counter text-right"></span>
</div>
</div>
</div>
<div>
<div class="nav-item d-flex align-items-center w-100">
<img src="" alt="" class="nav-icon">
<span class="flex-fill text-left text-truncate">news.ycombinator.com</span>
<span class="counter text-right">30</span>
</div>
</div>
</div>
</div>
</div>
<div class="vh-100 overflow-auto border-right" style="width: 300px;">
<div class="mt-2 mb-3 mx-2">
<div class="p-2 feed-item">
<div class="d-flex flex-column ml-4">
<div style="line-height: 1" class="d-flex">
<img src="./static/images/circle.svg" alt="" class="nav-icon ml-n4 mr-2">
<small class="flex-fill text-truncate">NY Times</small>
<small class="">12 Jun 2020</small>
</div>
<span class="font-weight-bold">
Police confiscates illegal Antimatter from scientists
</span>
</div>
</div>
</div>
</div>
<div class="m-3">three</div>
</div>
</body>
</html>

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

After

Width:  |  Height:  |  Size: 269 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>

After

Width:  |  Height:  |  Size: 270 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="inherit" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>

After

Width:  |  Height:  |  Size: 262 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>

After

Width:  |  Height:  |  Size: 258 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>

After

Width:  |  Height:  |  Size: 339 B

View File

@ -0,0 +1 @@
console.log("hello")

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,38 @@
.wrapper {
max-width: 1368px;
}
.nav-icon {
width: 16px;
height: 16px;
min-width: 16px;
margin-right: 8px;
}
.feed-icon {
width: 16px;
height: 16px;
min-width: 16px;
margin-left: -18px !important;
}
.counter {
max-width: 100px;
}
.nav-item {
padding: .375rem .75rem;
}
.nav-item, .feed-item {
border-radius: 4px;
}
.nav-item:hover, .feed-item:hover {
background-color: #f8f9fa;
cursor: pointer;
}
.nav-item:active, .feed-item:active {
background-color: #007bff;
color: white;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long