added placeholder help and upload buttons, functional view button

This commit is contained in:
Lynne Megido 2020-09-16 12:39:45 +10:00
parent 412f674b33
commit afbb814fef
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
4 changed files with 28 additions and 5 deletions

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
bin/
obj/
Snootalogue.db
wwwroot/Content/*

View file

@ -17,12 +17,16 @@
<div class="category">Category: @Html.DisplayFor(modelItem => item.Category)</div>
<div class="tags">@Html.DisplayFor(modelItem => item.Tags)</div>
@{string hash = item.Hash.Substring(0, 8);}
<div class="metadata">@Html.DisplayFor(modelItem => item.Filename) | @Html.DisplayFor(modelItem => item.Size) | <span title="@Html.DisplayFor(modelItem => item.Hash)">@hash...</span></div>
<div class="metadata">
@Html.DisplayFor(modelItem => item.Filename) |
<span title="@item.Size bytes">@Html.DisplayFor(modelItem => item.Size)</span> |
<span title="SHA256 digest: @Html.DisplayFor(modelItem => item.Hash)">@hash...</span>
</div>
</div>
<div class="document-column right">
@* TODO: replace these with font awesome or something *@
<div class="vertical-buttons">
<a href="#" class="button simple">View</a>
<a href="/Content/@item.Filename" class="button simple">View</a>
<a asp-page="./Documents/Details" asp-route-id="@item.ID" class="button simple">Details</a>
<a href="#" class="button simple">Edit</a>
<a href="#" class="button simple">Delete</a>

View file

@ -11,7 +11,11 @@
<body>
<nav>
<div id="nav-links">Snootalogue - Link 1 - Link 2</div>
<div id="nav-controls">
<input id="nav-search" type="search" placeholder="Search...">
<a class="button inverted" href="#">Help</a>
<a class="button inverted" href="#">Upload</a>
</div>
</nav>
<main>

View file

@ -24,10 +24,10 @@ a {
a.button {
color: #a66;
background: white;
background: transparent;
border: thin #a66 solid;
border-radius: 5px;
padding: 5px;
padding: 5px 10px;
text-align: center;
transition: 0.2s all;
}
@ -39,6 +39,14 @@ a.button.block {
display: inline-block;
margin: 5px auto;
}
a.button.inverted {
color: white;
border-color: white;
}
a.button.inverted:hover {
background: white;
color: #a00;
}
.vertical-buttons {
display: flex;
@ -146,3 +154,9 @@ main {
max-width: 90%;
}
}
@media only screen and (max-width: 800px) {
a.button {
padding: 3px 5px;
}
}