EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Debootstrapify

Browse Source
This commit is contained in:
Björn Fromme
2021-07-28 18:08:27 +02:00
parent fad342147e
commit 380a18357f
5 changed files with 122 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_bootstrap.scss
+2 -1
View File
@@ -14,7 +14,8 @@ $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
//@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
@import "bootstrap-overrides/grid";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/bootstrap-overrides/_grid.scss
+94
View File
@@ -0,0 +1,94 @@
//
// Grid system
// --------------------------------------------------
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
//.container {
// @include container-fixed;
//
// @media (min-width: $screen-sm-min) {
// width: $container-sm;
// }
// @media (min-width: $screen-md-min) {
// width: $container-md;
// }
// @media (min-width: $screen-lg-min) {
// width: $container-lg;
// }
//}
// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.
.container-fluid {
@include container-fixed;
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
@include make-row;
}
.row-no-gutters {
margin-right: 0;
margin-left: 0;
[class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
// Columns
//
// Common styles for small and large grid columns
@include make-grid-columns;
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
@include make-grid(xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: $screen-sm-min) {
@include make-grid(sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: $screen-md-min) {
@include make-grid(md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: $screen-lg-min) {
@include make-grid(lg);
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+21 -33
View File
@@ -5,47 +5,35 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" >
<f:section name="Mainnav">
<div class="navbar-main-wrapper" x-data>
<nav class="container navbar navbar-default navbar-main{f:if(condition: data.tx_eptheme_hide_searchbar, then: ' navbar-main--no-searchbar')}">
<f:render section="NavbarHeader" arguments="{_all}"/>
<div class="hidden-xs hidden-sm">
<div class="absolute top-0 left-0 w-full z-20 mt-12" x-data>
<div class="relative bg-white flex items-end justify-between py-2 px-4 md:max-w-screen-xl md:mx-auto shadow-lg">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}" title="">
<img class="w-32 md:w-48 lg:w-56 h-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
</a>
<div class="hidden md:block">
<f:render section="FirstLevel" arguments="{navPid: settings.mainNavPid, mobile: 0}"/>
</div>
<div class="hidden-md hidden-lg">
<div class="block md:hidden">
<f:render section="FirstLevel" arguments="{navPid: settings.mobileNavPid, mobile: 1}"/>
</div>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBox"/>
</f:else>
</f:if>
</nav>
</div>
</f:section>
<f:section name="NavbarHeader">
<div class="navbar-header">
<a x-on:click.prevent="$store.show.mobileNav = !$store.show.mobileNav" href="#" class="navbar-toggle collapsed" id="navtoggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<a x-on:click.prevent="$store.show.searchBox = !$store.show.searchBox" class="search hidden-md hidden-lg" href="#" id="searchboxtoggle">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</f:else>
</f:if>
<a class="navbar-brand" href="{f:uri.typolink(parameter: settings.defaultHomeUid)}" title="">
<img class="logo" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
</a>
<div class="flex md:hidden items-center space-x-4">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<button x-on:click.prevent="$store.show.searchBox = !$store.show.searchBox" class="block md:hidden focus:outline-none text-black">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</button>
</f:else>
</f:if>
<button x-on:click.prevent="$store.show.mobileNav = !$store.show.mobileNav" class="block md:hidden focus:outline-none text-black">
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
</div>
</f:section>
<f:section name="FirstLevel">
<div class="navbar-collapse"{f:if(condition: mobile, then: ' x-show="$store.show.mobileNav" x-cloak')}>
<div class="flex items-center justify-end space-x-4"{f:if(condition: mobile, then: ' x-show="$store.show.mobileNav" x-cloak')}>
<ul class="nav navbar-nav">
<v:menu pageUid="{navPid}" entryLevel="1" useShortcutUid="true">
<f:for each="{menu}" as="topitem" iteration="outerIteration">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+1 -1
View File
@@ -1,6 +1,6 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ep=EP\EpTheme\ViewHelpers}
<div class="area-nav">
<div class="area-nav fixed top-0 left-0 z-50">
<div class="area-nav__inner" x-data="{ open: false }">
<f:spaceless>
<f:if condition="{settings.hideAreaNavigation}">
tailwind.config.js
+4 -3
View File
@@ -22,6 +22,10 @@ module.exports = {
],
},
theme: {
container: {
center: true,
padding: '2rem',
},
fontFamily: {
'sans': [ 'Lato', 'sans-serif' ],
},
@@ -109,7 +113,4 @@ module.exports = {
plugins: [
require('@tailwindcss/custom-forms'),
],
corePlugins: {
container: false,
}
}