Skip to content

Commit

Permalink
Update home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@kekefreedog
kekefreedog committed Aug 17, 2024
1 parent 024a776 commit d249377
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 72 deletions.
12 changes: 12 additions & 0 deletions resources/Environment/Component/RegularBtn/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,18 @@ regular-btn {
/* Floating */
&.btn-floating {

/* Fix side nav */
margin: initial!important;

/* i */
i {

/* Fix side nav */
height: initial;
line-height: initial;

}


/* Round */
&.btn-round {
Expand Down
26 changes: 26 additions & 0 deletions resources/Environment/Page/Home/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
* Dependances
*/
const css = require("!!css-loader!sass-loader!./style.scss");
import { M } from "@materializecss/materialize";
const html = require("./template.hbs");
import {Crazypage} from "crazyphp";
require("./style.scss");
Expand Down Expand Up @@ -71,6 +72,31 @@ export default class Home extends Crazypage {

console.log("hello home");

// Init scroll spy
this.initScrollSpy();

}

/**
* Init Scroll Spy
*
* @return void
*/
private initScrollSpy = () => {

// Get el
let els = document.querySelectorAll('.scrollspy');

// Check els
if(els.length)

M.ScrollSpy.init(els, {
"activeClass": "active",
"getActiveElement": (id) => {
return 'a[href="#' + id + '"]';
}
});

}

}
Expand Down
165 changes: 93 additions & 72 deletions resources/Environment/Page/Home/template.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{!-- Root --}}
<div id="crazy-root" descriptive-id="" class="screen-fit-min-y screen-flex screen-center dark-mode-blue-grey darken-4-dark-mode light-mode-white">
<div id="crazy-root" descriptive-id="" class="screen-fit-min-y screen-flex screen-center">

{{!-- Left Navigation Rail --}}
<div id="crazy-left-navigation-rail" descriptive-id="" class="">
Expand All @@ -8,17 +8,17 @@

<nav>

<regular-btn label="hello" size="small" depth="1"></regular-btn>
<regular-btn class="mb-4" label="hello" size="small" depth="1"></regular-btn>

<regular-btn size="normal" depth="1"></regular-btn>
<regular-btn class="mb-4" size="normal" depth="1"></regular-btn>

<regular-btn size="large" depth="1"></regular-btn>
<regular-btn class="mb-4" size="large" depth="1"></regular-btn>

<regular-btn size="small" shape="box" depth="1"></regular-btn>
<regular-btn class="mb-4" size="small" shape="box" depth="1"></regular-btn>

<regular-btn size="normal" shape="box" depth="1"></regular-btn>
<regular-btn class="mb-4" size="normal" shape="box" depth="1"></regular-btn>

<regular-btn size="large" shape="box" depth="1" icon-text="delete"></regular-btn>
<regular-btn class="mb-4" size="large" shape="box" depth="1" icon-text="delete"></regular-btn>

</nav>

Expand All @@ -32,110 +32,131 @@
</div>

{{!-- Body --}}
<div id="crazy-content" descriptive-id="" class="element-flex-grow-1 container pb-5">
<div id="crazy-content" descriptive-id="" class="element-flex-grow-1 pb-5">

<div class="row">
<div class="row container">

{{!-- Title --}}
<div class="col s12">
<h1>Crazy PHP</h1>
</div>

{{!-- Components --}}
<div class="col s12">
<h3>Components</h3>
</div>
<div class="col s12 m10">

{{!-- Regular Btn --}}
<div class="col s12">
<h4>Regular Btn</h4>
</div>
{{!-- Title --}}
<div class="col s12">
<h1>Crazy PHP</h1>
</div>

{{!-- Regular Btn | Floating --}}
<section class="col s6 m6 s12 row">
{{!-- Components --}}
<div class="col s12">
<h3>Components</h3>
</div>

{{!-- Regular Btn --}}
<div class="col s12">
<h5>Btn Floating Round</h5>
<h4>Regular Btn</h4>
</div>

<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x">
{{!-- Regular Btn | Floating --}}
<section id="btn-floating-round" class="col s6 m6 s12 row scrollspy">

<regular-btn label="Floating small round" color-primary="orange" size="small" depth="1" shape="box" type="floating"></regular-btn>
<div class="col s12">
<h5>Btn Floating Round</h5>
</div>

<regular-btn label="Floating normal round" color-primary="red" size="normal" depth="1" shape="box" type="floating"></regular-btn>
<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x screen-wrap">

<regular-btn label="Floating large round" color-primary="blue" size="large" depth="1" shape="box" type="floating"></regular-btn>
<regular-btn class="mb-5 mr-5" label="Floating small round" color-primary="orange" size="small" depth="1" shape="box" type="floating"></regular-btn>

<regular-btn label="Floating extra-large round" color-primary="green" size="extra-large" depth="1" shape="box" type="floating"></regular-btn>
<regular-btn class="mb-5 mr-5" label="Floating normal round" color-primary="red" size="normal" depth="1" shape="box" type="floating"></regular-btn>

</div>
<regular-btn class="mb-5 mr-5" label="Floating large round" color-primary="blue" size="large" depth="1" shape="box" type="floating"></regular-btn>

</section>
<regular-btn class="mb-5 mr-5" label="Floating extra-large round" color-primary="green" size="extra-large" depth="1" shape="box" type="floating"></regular-btn>

{{!-- Regular Btn | Floating --}}
<section class="col s6 m6 s12 row">
</div>

<div class="col s12">
<h5>Btn Floating Box</h5>
</div>
</section>

<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x">
{{!-- Regular Btn | Floating --}}
<section id="btn-floating-box" class="col s6 m6 s12 row scrollspy">

<regular-btn label="Floating small box" color-primary="orange" size="small" depth="1" shape="round" type="floating"></regular-btn>
<div class="col s12">
<h5>Btn Floating Box</h5>
</div>

<regular-btn label="Floating normal box" color-primary="red" size="normal" depth="1" shape="round" type="floating"></regular-btn>
<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x screen-wrap">

<regular-btn label="Floating large box" color-primary="blue" size="large" depth="1" shape="round" type="floating"></regular-btn>
<regular-btn class="mb-5 mr-5" label="Floating small box" color-primary="orange" size="small" depth="1" shape="round" type="floating"></regular-btn>

<regular-btn label="Floating extra-large box" color-primary="green" size="extra-large" depth="1" shape="round" type="floating"></regular-btn>
<regular-btn class="mb-5 mr-5" label="Floating normal box" color-primary="red" size="normal" depth="1" shape="round" type="floating"></regular-btn>

</div>
<regular-btn class="mb-5 mr-5" label="Floating large box" color-primary="blue" size="large" depth="1" shape="round" type="floating"></regular-btn>

</section>
<regular-btn class="mb-5 mr-5" label="Floating extra-large box" color-primary="green" size="extra-large" depth="1" shape="round" type="floating"></regular-btn>

{{!-- Regular Btn | Floating --}}
<section class="col s1é m12 s12 row">
</div>

{{!-- Regular Btn | Extended --}}
<div class="col s12">
<h5>Btn Extended Box</h5>
</div>
</section>

<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x">
{{!-- Regular Btn | Floating --}}
<section id="btn-extended-box" class="col s1é m12 s12 row scrollspy">

<regular-btn label="Floating small" color-primary="orange" size="small" depth="1" shape="box" type="extended"></regular-btn>
{{!-- Regular Btn | Extended --}}
<div class="col s12">
<h5>Btn Extended Box</h5>
</div>

<regular-btn label="Floating normal" color-primary="red" size="normal" depth="1" shape="box" type="extended"></regular-btn>
<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x screen-wrap">

<regular-btn label="Floating large" color-primary="blue" size="large" depth="1" shape="box" type="extended"></regular-btn>

<regular-btn label="Floating extra-large" color-primary="green" size="extra-large" depth="1" shape="box" type="extended"></regular-btn>
<regular-btn class="mb-5 mr-5" label="Floating small" color-primary="orange" size="small" depth="1" shape="box" type="extended"></regular-btn>

</div>
<regular-btn class="mb-5 mr-5" label="Floating normal" color-primary="red" size="normal" depth="1" shape="box" type="extended"></regular-btn>

</section>
<regular-btn class="mb-5 mr-5" label="Floating large" color-primary="blue" size="large" depth="1" shape="box" type="extended"></regular-btn>

<regular-btn class="mb-5 mr-5" label="Floating extra-large" color-primary="green" size="extra-large" depth="1" shape="box" type="extended"></regular-btn>

{{!-- Regular Btn | Floating --}}
<section class="col s1é m12 s12 row">
</div>

{{!-- Regular Btn | Extended --}}
<div class="col s12">
<h5>Btn Extended Round</h5>
</div>
</section>

<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x">
{{!-- Regular Btn | Floating --}}
<section id="btn-extended-round" class="col s1é m12 s12 row scrollspy">

<regular-btn label="Floating small" color-primary="orange" size="small" depth="1" shape="round" type="extended"></regular-btn>
{{!-- Regular Btn | Extended --}}
<div class="col s12">
<h5>Btn Extended Round</h5>
</div>

<regular-btn label="Floating normal" color-primary="red" size="normal" depth="1" shape="round" type="extended"></regular-btn>
<div class="col s12 screen-flex screen-bottom-y screen-center-distributed-x screen-wrap">

<regular-btn label="Floating large" color-primary="blue" size="large" depth="1" shape="round" type="extended"></regular-btn>

<regular-btn label="Floating extra-large" color-primary="green" size="extra-large" depth="1" shape="round" type="extended"></regular-btn>
<regular-btn class="mb-5 mr-5" label="Floating small" color-primary="orange" size="small" depth="1" shape="round" type="extended"></regular-btn>

</div>
<regular-btn class="mb-5 mr-5" label="Floating normal" color-primary="red" size="normal" depth="1" shape="round" type="extended"></regular-btn>

<regular-btn class="mb-5 mr-5" label="Floating large" color-primary="blue" size="large" depth="1" shape="round" type="extended"></regular-btn>

<regular-btn class="mb-5 mr-5" label="Floating extra-large" color-primary="green" size="extra-large" depth="1" shape="round" type="extended"></regular-btn>

</div>

</section>
</section>

</div>

{{!-- Scroll spy --}}
<div class="col hide-on-small-only m2">

<div class="toc-wrapper pinned">

<ul class="section table-of-contents">

<li><a href="#btn-floating-round">Btn Floating Round</a></li>
<li><a href="#btn-floating-box">Btn Floating Box</a></li>
<li><a href="#btn-extended-box">Btn Extended Box</a></li>
<li><a href="#btn-extended-round">Btn Extended Round</a></li>
</ul>

</div>

</div>

</div>

Expand Down

0 comments on commit d249377

Please sign in to comment.