Merge Edge with sort and resize #2
30
base.css
30
base.css
@ -50,7 +50,19 @@ main{
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
}
|
}
|
||||||
.nav-menu, .sort-menu, .duration-hold{
|
.so-pane{
|
||||||
|
display: none;
|
||||||
|
overflow: hidden;
|
||||||
|
position: fixed;
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
.so-pane > *{
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
width: 90px;
|
||||||
|
padding: 0 1px;
|
||||||
|
}
|
||||||
|
.nav-menu, .sort-menu, .data-hold{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.menu a{
|
.menu a{
|
||||||
@ -97,6 +109,20 @@ main{
|
|||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
top:0;
|
top:0;
|
||||||
}
|
}
|
||||||
|
.sort-menu:checked ~ .so-pane{
|
||||||
|
display: block;
|
||||||
|
box-sizing: content-box;
|
||||||
|
position: fixed;
|
||||||
|
top: 85px;
|
||||||
|
max-height: 48px;
|
||||||
|
width: 360px;
|
||||||
|
height: 32px;
|
||||||
|
padding: 4px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
.main-box{
|
.main-box{
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -moz-box;
|
display: -moz-box;
|
||||||
@ -175,7 +201,7 @@ main{
|
|||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
@media (min-width: 540px){
|
@media (min-width: 560px){
|
||||||
.main-box > div, footer > p{
|
.main-box > div, footer > p{
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
7
dark.css
7
dark.css
@ -1,4 +1,4 @@
|
|||||||
body{
|
body, .so-pane > *{
|
||||||
color: #f9f9f9;
|
color: #f9f9f9;
|
||||||
background-color: #050506;
|
background-color: #050506;
|
||||||
border-color: #696969;
|
border-color: #696969;
|
||||||
@ -6,7 +6,7 @@ body{
|
|||||||
a{
|
a{
|
||||||
color: #b0b0f0;
|
color: #b0b0f0;
|
||||||
}
|
}
|
||||||
.header, .nav, footer{
|
.header, .nav, footer, .so-pane{
|
||||||
background-color: #1d1d1e;
|
background-color: #1d1d1e;
|
||||||
}
|
}
|
||||||
.home-button > div, .sort-button > div, .menu a{
|
.home-button > div, .sort-button > div, .menu a{
|
||||||
@ -24,6 +24,9 @@ a{
|
|||||||
.item-table{
|
.item-table{
|
||||||
background-color: #3f3f3f;
|
background-color: #3f3f3f;
|
||||||
}
|
}
|
||||||
|
.so-pane{
|
||||||
|
border-color: #3f3f3f;
|
||||||
|
}
|
||||||
.item-table > div > div, .item-table-caption{
|
.item-table > div > div, .item-table-caption{
|
||||||
border-color: #f5deb3;
|
border-color: #f5deb3;
|
||||||
}
|
}
|
||||||
|
@ -16,24 +16,70 @@
|
|||||||
<body>
|
<body>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
{{ if .Light }}
|
{{ if .Light }}
|
||||||
<a href="?light" class="home-button no-dec"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="⌂"></div></a>
|
<a href="?light" class="home-button no-dec" title="Home" id="logo"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="⌂"></div></a>
|
||||||
<a href="?{{ .Parameters }}" class="home-button no-dec"><div><img src="{{ .Data.MoonImageLocation }}" width="64px" alt='{{ "{" }}'></div></a>
|
<a href="?{{ .Parameters }}" class="home-button no-dec" title="Switch to Dark Mode" id="theme"><div><img src="{{ .Data.MoonImageLocation }}" width="64px" alt='{{ "{" }}'></div></a>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
<a href="?" class="home-button no-dec"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="⌂"></div></a>
|
<a href="?" class="home-button no-dec" title="Home" id="logo"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="⌂"></div></a>
|
||||||
{{ if eq .Parameters "" }}
|
{{ if eq .Parameters "" }}
|
||||||
<a href="?light" class="home-button no-dec"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
|
<a href="?light" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
<a href="?light&{{ .Parameters }}" class="home-button no-dec"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
|
<a href="?light&{{ .Parameters }}" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<input class="sort-menu" type="checkbox" id="sort-menu"/>
|
<input class="sort-menu" type="checkbox" id="sort-menu"/>
|
||||||
<label class="sort-button no-dec" for="sort-menu"><div><b>↓</b></div></label>
|
<label class="sort-button no-dec" for="sort-menu" title="Order and Sort Options"><div><b>↓</b></div></label>
|
||||||
|
<form class="so-pane" action="?" method="get" id="so-form">
|
||||||
|
{{ if .Light }}
|
||||||
|
<input id="so-theme" type="hidden" name="light" />
|
||||||
|
{{ end }}
|
||||||
|
{{ $sort := 0 }}
|
||||||
|
<label class="no-dec" for="so-order">Order by:</label>
|
||||||
|
<select name="order" id="so-order">
|
||||||
|
{{ if eq .OrderStartDate 0 }}
|
||||||
|
<option value="start">Start Date</option>
|
||||||
|
{{ else }}
|
||||||
|
<option value="start" selected>Start Date</option>
|
||||||
|
{{ $sort = .OrderStartDate }}
|
||||||
|
{{ end }}
|
||||||
|
{{ if eq .OrderEndDate 0 }}
|
||||||
|
<option value="end">End Date</option>
|
||||||
|
{{ else }}
|
||||||
|
<option value="end" selected>End Date</option>
|
||||||
|
{{ $sort = .OrderEndDate }}
|
||||||
|
{{ end }}
|
||||||
|
{{ if eq .OrderName 0 }}
|
||||||
|
<option value="name">Name</option>
|
||||||
|
{{ else }}
|
||||||
|
<option value="name" selected>Name</option>
|
||||||
|
{{ $sort = .OrderName }}
|
||||||
|
{{ end }}
|
||||||
|
{{ if eq .OrderDuration 0 }}
|
||||||
|
<option value="duration">Duration</option>
|
||||||
|
{{ else }}
|
||||||
|
<option value="duration" selected>Duration</option>
|
||||||
|
{{ $sort = .OrderDuration }}
|
||||||
|
{{ end }}
|
||||||
|
</select>
|
||||||
|
<label class="no-dec" for="so-sort">Sort:</label>
|
||||||
|
<select name="sort" id="so-sort">
|
||||||
|
{{ if lt $sort 0 }}
|
||||||
|
<option value="asc" selected>Ascending</option>
|
||||||
|
{{ else }}
|
||||||
|
<option value="asc">Ascending</option>
|
||||||
|
{{ end }}
|
||||||
|
{{ if gt $sort 0 }}
|
||||||
|
<option value="desc" selected>Descending</option>
|
||||||
|
{{ else }}
|
||||||
|
<option value="desc">Descending</option>
|
||||||
|
{{ end }}
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
<input class="nav-menu" type="checkbox" id="nav-menu"/>
|
<input class="nav-menu" type="checkbox" id="nav-menu"/>
|
||||||
<label class="hmb" for="nav-menu"><span class="hmb-line"></span></label>
|
<label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
|
||||||
<nav class="nav">
|
<nav class="nav" id="nav">
|
||||||
<ul class="menu no-lst-style">
|
<ul class="menu no-lst-style">
|
||||||
{{ range .Data.GetHeaderLabels }}
|
{{ range .Data.GetHeaderLabels }}
|
||||||
<li><b><a href="{{ $.Data.GetHeaderLink . }}" class="no-dec">{{ . }}</a></b></li>
|
<li><b><a href="{{ $.Data.GetHeaderLink . }}" class="no-dec" title="{{ . }}">{{ . }}</a></b></li>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
@ -54,7 +100,7 @@
|
|||||||
<div class="content">{{ .Data.About.GetContent }}</div>
|
<div class="content">{{ .Data.About.GetContent }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-table-360">
|
<div class="item-table-360">
|
||||||
<div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
|
<div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -95,13 +141,15 @@
|
|||||||
<div class="item-table-caption">
|
<div class="item-table-caption">
|
||||||
<div class="image-box">
|
<div class="image-box">
|
||||||
{{ range .GetImages }}
|
{{ range .GetImages }}
|
||||||
<a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" width="240px"></a>
|
<a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="duration-hold">{{ .GetInt64Duration }}</div>
|
<div class="data-hold">{{ .GetInt64Duration }}</div>
|
||||||
|
<div class="data-hold">{{ .GetStartDateHTML }}</div>
|
||||||
|
<div class="data-hold">{{ .GetEndDateHTML }}</div>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</main>
|
</main>
|
||||||
|
@ -5,6 +5,9 @@ cssDarkURL: "https://cityuni.captainalm.com/resources/assets/dark.css"
|
|||||||
cssLightURL: "https://cityuni.captainalm.com/resources/assets/light.css"
|
cssLightURL: "https://cityuni.captainalm.com/resources/assets/light.css"
|
||||||
jScriptURL: "https://cityuni.captainalm.com/resources/assets/index.js"
|
jScriptURL: "https://cityuni.captainalm.com/resources/assets/index.js"
|
||||||
noVideoImageLocation: "https://cityuni.captainalm.com/resources/assets/novideo.png"
|
noVideoImageLocation: "https://cityuni.captainalm.com/resources/assets/novideo.png"
|
||||||
|
logoImageLocation: "https://cityuni.captainalm.com/resources/assets/logo.png"
|
||||||
|
moonImageLocation: "https://cityuni.captainalm.com/resources/assets/moon.png"
|
||||||
|
sunImageLocation: "https://cityuni.captainalm.com/resources/assets/sun.png"
|
||||||
headerLinks:
|
headerLinks:
|
||||||
Main Portfolio: "https://portfolio.captainalm.com/"
|
Main Portfolio: "https://portfolio.captainalm.com/"
|
||||||
Root Site Home: "https://www.captainalm.com/"
|
Root Site Home: "https://www.captainalm.com/"
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
body{
|
body, .so-pane > *{
|
||||||
color: #060606;
|
color: #060606;
|
||||||
background-color: #fafaf9;
|
background-color: #fafaf9;
|
||||||
border-color: #969696;
|
border-color: #969696;
|
||||||
@ -6,7 +6,7 @@ body{
|
|||||||
a{
|
a{
|
||||||
color: #4f4fff;
|
color: #4f4fff;
|
||||||
}
|
}
|
||||||
.header, .nav, footer{
|
.header, .nav, footer, .so-pane{
|
||||||
background-color: #e2e2e1;
|
background-color: #e2e2e1;
|
||||||
}
|
}
|
||||||
.home-button > div, .sort-button > div, .menu a{
|
.home-button > div, .sort-button > div, .menu a{
|
||||||
@ -24,6 +24,9 @@ a{
|
|||||||
.item-table{
|
.item-table{
|
||||||
background-color: #c0c0c0;
|
background-color: #c0c0c0;
|
||||||
}
|
}
|
||||||
|
.so-pane{
|
||||||
|
border-color: #c0c0c0;
|
||||||
|
}
|
||||||
.item-table > div > div, .item-table-caption{
|
.item-table > div > div, .item-table-caption{
|
||||||
border-color: #0a214c;
|
border-color: #0a214c;
|
||||||
}
|
}
|
||||||
|
@ -4,6 +4,7 @@ import (
|
|||||||
"golang.captainalm.com/cityuni-webserver/utils/yaml"
|
"golang.captainalm.com/cityuni-webserver/utils/yaml"
|
||||||
"html/template"
|
"html/template"
|
||||||
"math"
|
"math"
|
||||||
|
"net/http"
|
||||||
"time"
|
"time"
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -31,6 +32,10 @@ func (ey EntryYaml) GetStartDate() string {
|
|||||||
return ey.StartDate.Format(dateFormat)
|
return ey.StartDate.Format(dateFormat)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func (ey EntryYaml) GetStartDateHTML() string {
|
||||||
|
return ey.StartDate.Format(http.TimeFormat)
|
||||||
|
}
|
||||||
|
|
||||||
func (ey EntryYaml) GetEndDate() string {
|
func (ey EntryYaml) GetEndDate() string {
|
||||||
if ey.EndDate.IsZero() {
|
if ey.EndDate.IsZero() {
|
||||||
return ""
|
return ""
|
||||||
@ -39,6 +44,10 @@ func (ey EntryYaml) GetEndDate() string {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
func (ey EntryYaml) GetEndDateHTML() string {
|
||||||
|
return ey.GetEndTime().Format(http.TimeFormat)
|
||||||
|
}
|
||||||
|
|
||||||
func (ey EntryYaml) GetEndTime() time.Time {
|
func (ey EntryYaml) GetEndTime() time.Time {
|
||||||
if ey.EndDate.IsZero() {
|
if ey.EndDate.IsZero() {
|
||||||
return time.Now()
|
return time.Now()
|
||||||
|
Loading…
Reference in New Issue
Block a user