fixing menu icon, and category name

This commit is contained in:
2024-01-31 23:25:28 +01:00
parent 232df1e4e0
commit dc9992cba0
13 changed files with 90 additions and 41 deletions

View File

@@ -14,7 +14,7 @@ var CategoryMenu = []string{
"Biznis",
"Sport",
"Magazin",
"Nauka i tehnologija",
"Scitech",
"Ostalo",
}

View File

@@ -15,7 +15,7 @@
<div class="timestamp"> starenovine - {{ .FormatedCreatedAt }} - {{.Category}}</div>
</article>
{{else}}
<div class="empty">
<div class="prewi">
Nema članaka za izabrani datum.
</div>
{{end}}

View File

@@ -1,6 +1,5 @@
{{define "articlecategoryHTML"}}
<h1>{{.category}}</h1>
<h3 class="category">{{.title}}</h3>
{{range .articles}}
<article class="news-article">
<div class="article_content">
@@ -16,7 +15,7 @@
<div class="timestamp"> starenovine - {{ .FormatedCreatedAt }} - {{.Category}}</div>
</article>
{{else}}
<div class="empty">
<div class="prewi">
Nema članaka za izabrani datum.
</div>
{{end}}

View File

@@ -1,7 +1,12 @@
{{define "categorymenuHTML"}}
<nav class="hed">
<div id="small-menu" onclick="handleSmallMenu()">
Menu
<div id="small-menu" onclick="handleSmallMenu();myFunction(this)">
<div class="menu-icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<p>Menu</p>
</div>
<div class="menu">
<a href="/">
@@ -27,6 +32,9 @@
let menu = document.querySelector('.menu')
menu.classList.toggle('show-menu')
}
function myFunction(x) {
x.classList.toggle("change");
}
const handleScroll = function(event) {
const top = window.scrollY;

View File

@@ -2,31 +2,9 @@
<footer>
<center>
<br>
<nav class="hed">
<a href="{{.previous}}">
<div class="arr-pr-nx" title="Prethodna">
<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="prev" transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
<polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
</g>
</svg>
</div>
</a>
<a href="{{.next}}">
<div class="arr-pr-nx" title="Sledeca">
<svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
</g>
</svg>
</div>
</a>
</nav>
<div class="hed">
<p>starenovine 2023-2024</p>
</div>
</center>
</footer>

View File

@@ -30,6 +30,13 @@ body {
overflow-x: hidden;
background-color: black;
}
.category{
color: white;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h1#title {
background-color: #0B173B;
@@ -288,7 +295,10 @@ pre.article_content {
@media only screen and (max-width: 600px) {
#small-menu{
display: block;
display: flex;
margin-left: 20px;
align-items: center;
gap: 5px;
}
.fa-home{
display: none;
@@ -306,13 +316,16 @@ pre.article_content {
color: white;
display: grid;
transition: background-color 0.5s var(--ease);
margin-left: 50px;
justify-content: left;
margin-top: 5px;
margin-bottom: 5px;
}
.hed{
padding-top: 5px;
padding-bottom: 5px;
height: fit-content;
display: grid;
gap: 0 ;
justify-content: left;
}
.menu.show-menu > a{
text-decoration: none;
@@ -440,6 +453,28 @@ html {
.home-icon:hover i {
color: #FF0000;
}
.menu-icon {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
</style>
</head>

View File

@@ -17,6 +17,5 @@
{{template "categorymenuHTML" .}}
</br>
</header>
{{end}}

27
web/data/prevnext.html Normal file
View File

@@ -0,0 +1,27 @@
{{define "prevnextHTML"}}
<nav class="fot">
<a href="{{.previous}}">
<div class="arr-pr-nx" title="Prethodna">
<svg width="18px" height="17px" viewBox="0 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="prev" transform="translate(8.500000, 8.500000) scale(-1, 1) translate(-8.500000, -8.500000)">
<polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
</g>
</svg>
</div>
</a>
<a href="{{.next}}">
<div class="arr-pr-nx" title="Sledeca">
<svg width="18px" height="17px" viewBox="-1 0 18 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<polygon class="arrow" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<polygon class="arrow-fixed" points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596"></polygon>
<path d="M-4.58892184e-16,0.56157424 L-4.58892184e-16,16.1929159 L9.708,8.33860465 L-1.64313008e-15,0.56157424 L-4.58892184e-16,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z"></path>
</g>
</svg>
</div>
</a>
</nav>
{{end}}

View File

@@ -1,4 +1,5 @@
{{define "weatherwidgetHTML"}}
<br>
<a class="w-link" href="/weather">
<div id="weather">
{{range .weatherInfo}}

View File

@@ -4,10 +4,10 @@
<body>
{{template "headerHTML" .}}
{{template "weatherwidgetHTML"}}
{{template "singleArticleHTML" .}}
<br>
{{template "prevnextHTML" .}}
{{template "footerHTML" .}}
</body>
</html>

View File

@@ -3,9 +3,9 @@
{{template "headHTML" .}}
<body>
{{template "headerHTML" .}}
{{template "articlecategoryHTML" .}}
<br>
{{template "footerHTML" .}}
</body>
</html>

View File

@@ -7,7 +7,8 @@
{{template "weatherwidgetHTML"}}
{{template "articlesHTML" .}}
<br>
{{template "prevnextHTML" .}}
{{template "footerHTML" .}}
</body>
</html>

View File

@@ -6,7 +6,8 @@
{{template "weatherwidgetHTML" .}}
{{template "articlesHTML" .}}
<br>
{{template "prevnextHTML" .}}
{{template "footerHTML" .}}
</body>
</html>