Skip to content

Commit

Permalink
header formatting to shrink/grow fixed header
Browse files Browse the repository at this point in the history
  • Loading branch information
@ninianne98
ninianne98 committed Jun 5, 2024
1 parent 9643216 commit 7cb0e79
Show file tree
Hide file tree
Showing 35 changed files with 792 additions and 210 deletions.
73 changes: 54 additions & 19 deletions CMSAdmin/Views/CmsAdmin/_LayoutMain_ccc.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,17 @@

bool siteExists = SiteData.CurrentSiteExists;
var versionKey = string.Format("cms={0}", SiteData.CurrentDLLVersion);

var siteCaption = "<span>&nbsp;</span>";

if (siteExists) {
if (!string.IsNullOrEmpty(SiteData.CurrentSite.SiteTagline)
&& !string.IsNullOrEmpty(SiteData.CurrentSite.SiteTagline)) {
siteCaption = string.Format("{0}: {1}", SiteData.CurrentSite.SiteName, SiteData.CurrentSite.SiteTagline);
} else {
siteCaption = string.Format("{0} {1}", SiteData.CurrentSite.SiteName, SiteData.CurrentSite.SiteTagline);
}
}
}
<html lang="en">
<head>
Expand All @@ -15,9 +26,40 @@
@Html.Partial("~/Views/CmsAdmin/_mainCommonHead.cshtml")

@RenderSection("scripts", required: false)
<script>
$(document).ready(function () {
$(window).on("scroll", onScroll);
onScroll(null);
});

function onScroll(event) {
var scrollPos = $(window).scrollTop();

if ($("#headercontainer").length > 0) {
var refElement = $("#headercontainer");
var mnuElement = $("#nav-menu-container");
//console.log(scrollPos + ' | ' + refElement.height());

if (scrollPos > (refElement.height() - mnuElement.height())) {
$("#nav-break").css('height', '5.5em');
$("#headercontainer").css('height', '2.25em');
$("#headercontainer").css('min-height', '75px');
$("#nav-menu-container").css('top', '3.25em');
$("#header").css('display', 'none');
$("#header-sm").css('display', '');
} else {
$("#nav-break").css('height', '');
$("#headercontainer").css('height', '');
$("#headercontainer").css('min-height', '');
$("#nav-menu-container").css('top', '');
$("#header").css('display', '');
$("#header-sm").css('display', 'none');
}
}
}
</script>
</head>
<body>

<div id="cmsAjaxMainDiv">
<div id="headercontainer">
<div id="header">
Expand All @@ -27,28 +69,24 @@
<div style="clear: both">
</div>
<h3>
@if (SiteData.CurrentSite != null) {
if (!string.IsNullOrEmpty(SiteData.CurrentSite.SiteTagline)
&& !string.IsNullOrEmpty(SiteData.CurrentSite.SiteTagline)) {
@String.Format("{0}: {1}", SiteData.CurrentSite.SiteName, SiteData.CurrentSite.SiteTagline)
} else {
@String.Format("{0} {1}", SiteData.CurrentSite.SiteName, SiteData.CurrentSite.SiteTagline)
}
} else {
<span>&nbsp;</span>
@Html.Raw(siteCaption)
</h3>
</div>
<div id="header-sm" style="display: none">
<h3>
@SiteData.CarrotCakeCMSVersionMM
@if (siteExists) {
<span> | </span>
}
@Html.Raw(siteCaption)
</h3>

<div class="widthshim">
</div>
</div>
</div>

<div id="nav-menu-container">
<ul id="nav-menu">
<li id="tabHome">
<a href="@SiteData.AdminFolderPath">
<img alt="Home" src="/Assets/Admin/Images/house.png" />
<img alt="Home" src="~/Assets/Admin/Images/house.png" />
</a>
</li>

Expand Down Expand Up @@ -131,9 +169,8 @@
<li>&nbsp;</li>
</ul>
</div>
<div class="widthshim">
<div id="nav-break">
</div>

<div id="content">
<div class="pad-content">
<h1 class="headingColor">
Expand Down Expand Up @@ -168,8 +205,6 @@
}
</p>
</div>
<div class="widthshim">
</div>
</div>
</div>
@RenderSection("footer", required: false)
Expand Down
2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.amethystorchid.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.blueizis.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.classic.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.frenchblue.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.mauve.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.mosaicblue.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.plum.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.quetzalgreen.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.rust.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.sandstone.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CMSAdmin/wwwroot/Assets/Admin/skins/main.sugaralmond.min.css
View file

Large diffs are not rendered by default.

82 changes: 67 additions & 15 deletions CMSComponents/skins/_main-window.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@

.mainUI(@themeColor) {
@themeDark85: darken(@themeColor, 85%);
@themeDark10: darken(@themeColor, 10%);
@themeDark15: darken(@themeColor, 15%);
@themeDark20: darken(@themeColor, 20%);
@themeLight5: lighten(@themeColor, 5%);
@themeLight10: lighten(@themeColor, 10%);
@themeLight15: lighten(@themeColor, 15%);
@themeLight25: lighten(@themeColor, 25%);

Expand Down Expand Up @@ -37,59 +41,96 @@ Main CarrotCake CMS stylesheet
#headercontainer {
margin: 0;
padding: 0;
min-height: 115px;
height: 11em;
min-height: 100px;
height: 10em;
background: @themeColor;
background: linear-gradient(to right, @themeLight15 0%, @themeColor 25%, @themeColor 75%, @themeDark15 96%);
background: linear-gradient(to right, @themeLight5 0%, @themeColor 20%, @themeDark10 70%, @themeDark20 90%);
//background: linear-gradient(45deg, @themeLight15 0%, @themeColor 30%, @themeColor 70%, @themeDark15 96%);
//background-image: linear-gradient(to top, #dedede 0%, @themeLight15 50%, @themeColor 90%);
min-width: 1080px;
width: 100%;
position: fixed;
z-index: 20;
top: 0;
right: 0;
left: 0;
clear: both;
}

#header {
#header, #header-sm {
font-family: Georgia, Times New Roman, Serif;
margin: 0;
padding: 0;
min-height: 110px;
height: 10em;
width: 1080px;
margin-left: 5em;
}

#header h1, #header h2, #header h3 {
#header {
min-height: 100px;
height: 9em;
}

#header-sm {
min-height: 50px;
height: 2.25em;
}

#header h1, #header h2, #header h3,
#header-sm h1, #header-sm h2, #header-sm h3 {
float: left;
font-weight: bolder;
color: contrast(@themeDark15, #222, #fff);
font-size: 1em;
color: contrast(@themeColor, @black, @white);
font-family: Georgia, Times New Roman, Serif;
padding: 2px;
margin: 2px;
}

#header h1 {
font-size: 2.4em;
padding: 1.3em 0 0 1.3em;
padding: 1.1em 0 0 1.3em;
}

#header h2 {
font-size: 2em;
padding: 1.3em 0 0 0;
padding: 1.1em 0 0 0;
}

#header h3 {
color: contrast(@themeLight15, #222, #fff);
font-size: 1.6em;
padding: 0.6em 0 0 0;
}

#header h3, #header-sm h3 {
font-size: 1.4em;
padding: 0.65em 0 0 0;
}
/* Menu */
#nav-menu-container {
margin: 0;
padding: 0;
font: normal 1.1em 'Segoe UI',Tahoma, Lucida Grande, Lucida Sans, Arial, Helvetica, sans-serif;
background: #3F3F3F url(../images/menu-gradient.png) repeat-x;
//background: #3F3F3F url(../images/menu-gradient.png) repeat-x;
background: #444;
background: linear-gradient(180deg, #111 0%, #888 20%, #444 45%, #222 70%, #111 88%);
font-weight: normal;
min-width: 1080px;
height: 3em;
top: 8.95em;
margin-bottom: 1em;
width: 100%;
position: fixed;
z-index: 21;
right: 0;
left: 0;
clear: both;
}

#nav-break {
clear: both;
min-height: 125px;
height: 12.75em;
width: 1080px;
border: 1px dashed transparent;
}

#nav-menu {
Expand Down Expand Up @@ -182,7 +223,18 @@ Main CarrotCake CMS stylesheet
#nav-menu > li.sub {
padding-right: 20px;
margin-right: 10px;
background: url(../images/arrowdown.png) no-repeat 98% 50%;
//background: url(../images/arrowdown.png) no-repeat 98% 50%;
}

#nav-menu > li.sub:after {
content: '';
margin-top: 1.2em;
margin-left: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
}

#nav-menu > li.sub ul li a {
Expand Down Expand Up @@ -266,4 +318,4 @@ jqmodal styles
height: 98%;
width: 100%;
}
}
}
73 changes: 59 additions & 14 deletions CMSComponents/skins/main.amethystorchid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,54 +413,90 @@ H3 {
#headercontainer {
margin: 0;
padding: 0;
min-height: 115px;
height: 11em;
min-height: 100px;
height: 10em;
background: #926aa6;
background: linear-gradient(to right, #b59ac3 0%, #926aa6 25%, #926aa6 75%, #6a497a 96%);
min-width: 1080px;
background: linear-gradient(to right, #9e7ab0 0%, #926aa6 20%, #78538a 70%, #5c406a 90%);
width: 100%;
position: fixed;
z-index: 20;
top: 0;
right: 0;
left: 0;
clear: both;
}
#header {
#header,
#header-sm {
font-family: Georgia, Times New Roman, Serif;
margin: 0;
padding: 0;
min-height: 110px;
height: 10em;
width: 1080px;
margin-left: 5em;
}
#header {
min-height: 100px;
height: 9em;
}
#header-sm {
min-height: 50px;
height: 2.25em;
}
#header h1,
#header h2,
#header h3 {
#header h3,
#header-sm h1,
#header-sm h2,
#header-sm h3 {
float: left;
font-weight: bolder;
color: #fff;
font-size: 1em;
color: #fefefe;
font-family: Georgia, Times New Roman, Serif;
padding: 2px;
margin: 2px;
}
#header h1 {
font-size: 2.4em;
padding: 1.3em 0 0 1.3em;
padding: 1.1em 0 0 1.3em;
}
#header h2 {
font-size: 2em;
padding: 1.3em 0 0 0;
padding: 1.1em 0 0 0;
}
#header h3 {
color: #fff;
font-size: 1.6em;
padding: 0.6em 0 0 0;
}
#header h3,
#header-sm h3 {
font-size: 1.4em;
padding: 0.65em 0 0 0;
}
/* Menu */
#nav-menu-container {
margin: 0;
padding: 0;
font: normal 1.1em 'Segoe UI', Tahoma, Lucida Grande, Lucida Sans, Arial, Helvetica, sans-serif;
background: #3F3F3F url(../images/menu-gradient.png) repeat-x;
background: #444;
background: linear-gradient(180deg, #111 0%, #888 20%, #444 45%, #222 70%, #111 88%);
font-weight: normal;
min-width: 1080px;
height: 3em;
top: 8.95em;
margin-bottom: 1em;
width: 100%;
position: fixed;
z-index: 21;
right: 0;
left: 0;
clear: both;
}
#nav-break {
clear: both;
min-height: 125px;
height: 12.75em;
width: 1080px;
border: 1px dashed transparent;
}
#nav-menu {
margin: 0;
Expand Down Expand Up @@ -537,7 +573,16 @@ H3 {
#nav-menu > li.sub {
padding-right: 20px;
margin-right: 10px;
background: url(../images/arrowdown.png) no-repeat 98% 50%;
}
#nav-menu > li.sub:after {
content: '';
margin-top: 1.2em;
margin-left: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
}
#nav-menu > li.sub ul li a {
padding: 0.4em;
Expand Down
2 changes: 1 addition & 1 deletion CMSComponents/skins/main.amethystorchid.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 7cb0e79

Please sign in to comment.