5-layouts edit

main-layout  edit

The HTML backbone structure for all pages

Layout cannot be displayed in Atomic Docs. Click here to view local site

Copy
Edit
<!-- components/5-layouts/main-layout.php --> <?php $ishomepage = false; if (strpos(strtolower($_SERVER['REQUEST_URI']), strtolower("homepage")) != false) { $ishomepage = true; } if (strpos(strtolower($_SERVER['REQUEST_URI']), strtolower("index-wm")) != false) { $isRow = false; if (isset($_GET['url']) && strpos(strtolower($_GET['url']), "row") != false) { $isRow = true; } ?> <!DOCTYPE html> <html lang="en"> <head> <?php $filename = '../atomic-head.php'; if (file_exists($filename)) { include("../atomic-head.php"); } ?> </head> <!-- <body class="toggle-menus menu-open"> --> <!-- <body class="local vims"> --> <body class="local"> <?php // show header if not displaying a row if (!$isRow && !$ishomepage) { ?> <?php outputElement("broadcast-bar"); ?> <img id="print_logo" alt="William & Mary" src="https://www.wm.edu/img/wm_horizontal_single_line_black.png" /> <?php outputMenu("topbar"); ?> <!-- HEADER --> <header id="main-header"> <?php outputMenu("site-menu"); ?> <?php outputMenu("info-for-menu"); ?> <!-- Photo Title Header --> <?php if (isset($_GET['title']) && $_GET['title'] == "Landing Page") { outputMenu("banner-super"); } else { outputMenu("banner"); // outputMenu("banner-medium"); // outputMenu("banner-tall"); } ?> </header> <?php }; ?> <!-- MAIN page area --> <?php if (!isset($_GET)) { echo "No file specified in url query. <a href='/atomic-docs/wm/atomic-core/index-wm.php?url=components/9-Content-Types/Content-Page.php'>Go to local home page</a>"; } else { // use the url to output the file if (isset($_GET['url']) && $_GET['url'] != "") { include $include_url . $_GET['url']; } } ?> <!-- end #main_content --> <?php // show footer if not displaying a row if (!$isRow) { // FOOTER outputMenu("footer"); }; ?> </body> <?php $filename = '../atomic-foot.php'; if (file_exists($filename)) { include("../atomic-foot.php"); } ?> </html> <?php } else { ?> <p>Layout cannot be displayed in Atomic Docs. <a target="_blank" href="/atomic-docs/wm/atomic-core/index-wm.php?url=components/9-Content-Types/Content-Page.php">Click here to view local site</a></p> <?php }; ?>
Cancel
Copy
Copy
Edit
/* scss/5-layouts/_main-layout.scss */ // ios and chrome specific css to keep in safe area on phones body { padding: env(save-area-inset-top, 0px) env(save-area-inset-right, 0px) env(save-area-inset-bottom, 0px) env(save-area-inset-left, 0px); //background-color: color(background); } // CSS CONVENTIONS // ideally: // - child layout (margin) is controlled by the parent // - start with mobile only styles (sets up usable base version) // ---------------------------------------------- // LAYOUT STYLES PRE-SEPT 4, 2020 // everything up here gets overwritten by the New Styles // #MAIN_CONTENT LAYOUT STYLES #main_content { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0; padding: 0; background-color: #fff; } // .CONTENT_WRAPPER LAYOUT STYLES // direct child is #content .content_wrapper { z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; padding-top: kspaces(sm); background-color: white; margin: 0; @include breakpoint($mobile-to-wide-mobile-breakpoint) { margin: 0; } @include breakpoint($mobile-to-desktop-breakpoint) { width: 100%; max-width: none; padding-top: kspaces(lg); } @include breakpoint($desktop-to-wide-desktop-breakpoint) { } @include breakpoint($wide-desktop-to-ultrawide-desktop-breakpoint) { max-width: 1288px; } .hasRow & { position: relative; // add a border between content area and white row // not noticeable for other colors so can just leave on border-bottom: 1px solid $border-color; } } #main_content:not(.hasSidebar) .content_wrapper { width: 100%; } .content_wrapper + .h-theme-white::after { content: ""; background-color: var(--color-wmsilver-25); opacity: 0.4; height: 1px; position: absolute; top: -0.5px; width: 1288px; z-index: 2; max-width: calc(100% - var(--wm-row-side-padding-external) * 2); margin: 0 var(--wm-row-side-padding-external); left: 50%; transform: translateX(calc(-50% - var(--wm-row-side-padding-external))); } // #CONTENT LAYOUT STYLES // direct children are .user_content and #sidebar .hasSidebar #content { @include breakpoint($desktop-to-wide-desktop-breakpoint) { display: flex; padding: 0; } } #content { flex-basis: auto; flex-grow: 1; flex-shrink: 1; width: calc(100% - #{kspaces(lg)}); margin: 0 kspaces(sm); @include breakpoint($mobile-to-wide-mobile-breakpoint) { margin: 0 kspaces(lg); & .card.Small { width: 218px; } & .card.Large { width: 454px; } } @include breakpoint($mobile-to-desktop-breakpoint) { display: flex; flex-basis: auto; flex-direction: column; flex-grow: 1; flex-shrink: 1; width: calc(100% - 363px); max-width: 1288px; padding-right: 0; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { flex-direction: row; //max-width: 100%; // margin: 0 0 0 kspaces(sm); // margin: 0; margin: 0 kspaces(lg); padding: 0; } @include breakpoint(calc(1288px + 88px)) { margin: 0; } & .m-breadcrumbs { margin-bottom: 1.79rem; line-height: 1.2; & a { font-weight: 700; } } &.atoz .m-breadcrumbs { @include breakpoint($mobile-to-desktop-breakpoint) { margin-left: 0 !important; } } & > .grid { max-width: 100%; & .card { width: 100%; } } &.gallery { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; @include breakpoint($mobile-to-wide-mobile-breakpoint) { // margin: 0 auto; margin-bottom: kspaces(2xl); // padding: 0 kspaces(sm); padding: 0; } @include breakpoint($mobile-to-desktop-breakpoint) { max-width: 100%; & .user_content { flex-basis: 100%; width: 100%; margin: 0 auto; } } @include breakpoint($desktop-to-wide-desktop-breakpoint) { justify-content: center; & .user_content { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; } } > :not(#sidebar) { max-width: 100%; } } } // .USER_CONTENT PAGE NAV LAYOUT STYLES // direct child is .user_content--wrapper, which contains page nav .user_content .page_nav { display: block; width: 100%; margin-top: 0; margin-left: 0; /* On mobile and table devices set the space below the page nav to 1.68rem */ margin-bottom: $page-nav-margin-bottom; /* On all devices, change all divs in the left column to use only margin-top for spacing */ & .wm-page_menu, & .social-media-nav, & .extra-nav { margin-bottom: 0px; } & .social-media-nav, & .extra-nav { margin-top: 35px; } /* Hide the extra-nav's that are given the class empty via javascript */ & .extra-nav.empty, & .extra-nav:last-child.empty { display: none; } @include breakpoint($mobile-to-desktop-breakpoint) { position: absolute; top: 0; left: 0; // flex-basis: $page-nav-width; flex-basis: $page-nav-width; flex-grow: 0; flex-shrink: 0; // max-width: $page-nav-width; max-width: $page-nav-width; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { /* On desktop set the space below the page nav to 44px */ margin-bottom: kspaces(lg); } .extra-nav { position: relative; margin-top: 2.132rem; margin-bottom: $page-nav-element-spacing; padding: 1.3rem; padding-top: kspaces(sm); transition: all 0.18s ease-in; background: var(--color-pagenav-background); &:last-child { margin-bottom: 0; } } } // .USER_CONTENT--WRAPPER LAYOUT STYLES // contains page nav and content output .user_content--wrapper { width: 100%; // max-width: 100%; max-width: 920px; overflow: hidden; @include breakpoint($mobile-to-desktop-breakpoint) { // width: 75ch; width: calc(100% - calc($page-nav-width + 44px)); float: none; margin-left: calc($page-nav-width + 44px); & .user_content--wrapper { width: 100%; } } @include breakpoint($desktop-to-wide-desktop-breakpoint) { // adjust bottom margin to account for caret when there is a row .hasRow & { margin-bottom: 30px; } } } // space between end of content and next element (row/footer) .user_content--wrapper > *:last-child, .fullPage .content_wrapper > *:last-child { margin-bottom: 60px !important; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { /* On desktop, change the space below center column and right column from 60px to 44px */ .user_content--wrapper > :last-child, .fullPage .content_wrapper > :last-child, #sidebar { margin-bottom: kspaces(lg) !important; } } .fullPage .content_wrapper { max-width: 1288px; } // .USER_CONTENT LAYOUT STYLES // direct child is .user_content--wrapper, which contains page nav .user_content { position: relative; // margin-bottom: 0; margin: 0 auto; width: 100%; padding: 0; @include breakpoint($mobile-to-desktop-breakpoint) { margin-bottom: kspaces(lg); margin-bottom: 0; // padding-right: kspaces(sm); padding-right: 0; } @include breakpoint($menu-mobile-to-desktop-breakpoint) { flex-basis: 562px; flex-grow: 1; flex-shrink: 0; & > *:last-child { //margin-bottom: 0; padding-bottom: 0; } } @include breakpoint($mobile-to-desktop-breakpoint) { // This sets the minimum height when flex items are // stacked (i.e. "flex-direction: column" on parent) at this breakpoint // Some of our pages are super short! flex-basis: 300px; flex-basis: min-content; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { // This sets minimum width as flex-direction on parent is now row flex-basis: 562px; // padding-right: kspaces(lg); padding-right: 0; padding-bottom: 0; &:not(:last-child) { border-bottom: none !important; } } } .hasSidebar .user_content { @include breakpoint($desktop-to-wide-desktop-breakpoint) { flex-basis: 562px; flex-grow: 1; flex-shrink: 1; width: 100%; // max-width set so wide tables won't push it too wide // take sidebar width into account max-width: calc(100% - $sidebar-column-width); padding-right: 66px; //max-width: 562px; & .user_content { max-width: 550px !important; } } } // #SIDEBAR LAYOUT STYLES #sidebar { display: flex; align-content: flex-start; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0; padding-top: kspaces(lg); padding-bottom: kspaces(2xl); @include breakpoint($widget-mobile-to-tablet-breakpoint) { width: auto; max-width: 100%; } @include breakpoint($mobile-to-desktop-breakpoint) { width: auto; max-width: 100%; margin-left: calc(#{$page-nav-width} + #{kspaces(lg)}) !important; } @include breakpoint($desktop-to-wide-desktop-breakpoint) { width: $sidebar-column-width; // space between end of sidebar and next element margin-bottom: 0; margin-left: 0 !important; & > *:last-child { // space between end of last sidebar item and next element margin-bottom: $maincontent-bottom-spacing; } } } // ONE OFFS .fullPage .gallery .user_content { padding-right: 0; } .fullPage.hasSidebar .user_content { @include breakpoint($desktop-to-wide-desktop-breakpoint) { flex-basis: auto; flex-grow: 1; flex-shrink: 0; width: 562px; } } // border between user content and sidebar .user_content:not(:last-child) { // border-bottom: $border-width solid $border-color; border-bottom: 1px solid hsl(calc(195deg * 1), calc(4.4444444444% * 1), calc(82.3529411765% * 1.05)); } .user_content .user_content { border-bottom: none; } #sidebar { border-top: none; } @include breakpoint($widget-mobile-to-tablet-breakpoint) { .user_content:not(:last-child) { border-bottom: none; } #sidebar { border-top: $border-width solid $border-color; } } @include breakpoint($desktop-to-wide-desktop-breakpoint) { #sidebar { border-top: none; border-left: $border-width solid $border-color; } } .atoz .user_content { @include breakpoint($mobile-to-desktop-breakpoint) { padding-left: kspaces(sm); } } .atoz #sidebar, .gateway #sidebar { margin: 0 auto !important; }
Cancel