Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Style fixes #417

Merged
merged 4 commits into from
Sep 12, 2023
Merged

Style fixes #417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
40ec0ac
fix(footer): remove ul bullet points #373
wuda-io Sep 1, 2023
762ccd6
docs: grid offset examples
wuda-io Sep 1, 2023
fcf43f3
style: fix collapsible style for sidenav
wuda-io Sep 1, 2023
c519134
style: fix cards overflow
wuda-io Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/css/ghpages-materialize.css
View file
Open in desktop

Large diffs are not rendered by default.

102 changes: 55 additions & 47 deletions pug/contents/cards_content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,22 +28,18 @@ <h3 class="header">Basic Card</h3>
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
&lt;div class="row">
&lt;div class="col s12 m6">
&lt;div class="card">
&lt;div class="card-content">
&lt;span class="card-title">Card Title&lt;/span>
&lt;p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.&lt;/p>
&lt;/div>
&lt;div class="card-action">
&lt;a href="#">This is a link&lt;/a>
&lt;a href="#">This is a link&lt;/a>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="card">
&lt;div class="card-content">
&lt;span class="card-title">Card Title&lt;/span>
&lt;p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.&lt;/p>
&lt;/div>
</code>
&lt;div class="card-action">
&lt;a href="#">This is a link&lt;/a>
&lt;a href="#">This is a link&lt;/a>
&lt;/div>
&lt;/div>
</code>
</pre>

</div>
Expand All @@ -52,9 +48,10 @@ <h3 class="header">Basic Card</h3>

<div id="image" class="section scrollspy">
<div class="row">

<!-- Image Card -->
<div class="col s12 m7">
<h3 class="header">Image Card</h3>
<div class="s12 m7">
<h3 class="header">Image Card</h3>
<div class="card">
<div class="card-image">
<img src="images/sample-1.jpg">
Expand All @@ -67,43 +64,44 @@ <h3 class="header">Image Card</h3>
<a href="#">This is a link</a>
</div>
</div>

</div>
<div class="col s12 m5">

<div class="s12 m5">
<p class="caption">
Here is the standard card with an image thumbnail.
</p>
</div>
<div class="col s12">


<div class="s12">
<pre style="padding-top: 0px;">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
<code class="language-markup copiedText">
&lt;div class="row">
&lt;div class="col s12 m7">
&lt;div class="card">
&lt;div class="card-image">
&lt;img src="images/sample-1.jpg">
&lt;span class="card-title">Card Title&lt;/span>
&lt;/div>
&lt;div class="card-content">
&lt;p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.&lt;/p>
&lt;/div>
&lt;div class="card-action">
&lt;a href="#">This is a link&lt;/a>
&lt;/div>
&lt;/div>
&lt;/div>
&lt;div class="card">
&lt;div class="card-image">
&lt;img src="images/sample-1.jpg">
&lt;span class="card-title">Card Title&lt;/span>
&lt;/div>
</code>
</pre>

&lt;div class="card-content">
&lt;p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.&lt;/p>
&lt;/div>
&lt;div class="card-action">
&lt;a href="#">This is a link&lt;/a>
&lt;/div>
&lt;/div>
</code>
</pre>
</div>
</div>
</div>






<div id="fab" class="section scrollspy">
<div class="row">
<!-- Image Card -->
Expand Down Expand Up @@ -172,8 +170,13 @@ <h3 class="header">FABs in Cards</h3>
</div>
</div>





<div id="horizontal" class="section scrollspy">
<div class="row">

<!-- Horizontal Card -->
<div class="col s12 m7">
<h3 class="header">Horizontal Card</h3>
Expand All @@ -191,14 +194,14 @@ <h3 class="header">Horizontal Card</h3>
</div>
</div>
</div>
<div class="col s12 m5">


<div class="col s12 m5">
<p class="caption">
Here is the standard card with a horizontal image.
</p>
</div>
<div class="col s12">


<div class="col s12">
<pre style="padding-top: 0px;">
<span class="copyMessage">Copied!</span>
<i class="material-icons copyButton">content_copy</i>
Expand All @@ -219,13 +222,18 @@ <h3 class="header">Horizontal Card</h3>
&lt;/div>
&lt;/div>
&lt;/div>
</code>
</pre>

</code>
</pre>
</div>


</div>
</div>





<div id="reveal" class="section scrollspy">
<div class="row">
<!-- Pullup Card -->
Expand Down
4 changes: 2 additions & 2 deletions pug/contents/footer_content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h3 class="header">Introduction</h3>
<h5>Footer Content</h5>
<p>You can use rows and columns here to organize your footer content.</p>
</div>
<div class="l4 offset-l2 s12">
<div class="l4 offset-l8 s12">
<h5>Links</h5>
<ul>
<li><a href='#!'>Link 1</a></li>
Expand Down Expand Up @@ -45,7 +45,7 @@ <h5>Links</h5>
&lt;h5>Footer Content&lt;/h5>
&lt;p>You can use rows and columns here to organize your footer content.&lt;/p>
&lt;/div>
&lt;div class="l4 offset-l2 s12">
&lt;div class="l4 offset-l8 s12">
&lt;h5>Links&lt;/h5>
&lt;ul>
&lt;li>&lt;a href="#!">Link 1&lt;/a>&lt;/li>
Expand Down
62 changes: 45 additions & 17 deletions pug/contents/grid_content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,29 +121,63 @@ <h5>Columns live inside Rows</h5>
<!-- Grid Offsets -->
<div id="grid-offsets" class="section scrollspy">
<h2 class="header">Offsets</h2>
<p>To offset, simply add <code class="language-markup">offset-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.</p>
<p>To offset, simply add <code class="language-markup">offset-s2</code> to the class
where <code class="language-markup">s</code> signifies the screen class-prefix
(s = small, m = medium, l = large) and the number after is the number of columns
you want to offset by.</p>
<p class="red-text">Attention! This changed with v2! since we are using grid now, the offset
is always calculated absolutely starting from left! If you need relative offsets, then just add
empty columns to the row.</p>

<div class="row">
<div class="col s12 grid-example"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
<div class="col s6 offset-s6 grid-example"><span class="flow-text">6-columns (offset-by-6)</span></div>
</div>
<div class="row">
<div class="l6 grid-example"><span class="flow-text">l6 column</span></div>
<div class="l4 offset-l8 grid-example"><span class="flow-text">l4 column (offset-l8)</span></div>
</div>
<div class="row">
<div class="l2 offset-l3 grid-example"><span>offset-l3</span></div>
<div class="l2 offset-l6 grid-example"><span>offset-l6</span></div>
<div class="l2 offset-l9 grid-example"><span>offset-l9</span></div>
</div>
<div class="row">
<div class="l2 grid-example"><span>col</span></div>
<div class="l2"></div>
<div class="l2 grid-example"><span>relative offset 2</span></div>
</div>

<pre><code class="language-markup">
&lt;div class="row">
&lt;div class="col s12">&lt;span class="flow-text">This div is 12-columns wide on all screen sizes&lt;/span>&lt;/div>
&lt;div class="col s6 offset-s6">&lt;span class="flow-text">6-columns (offset-by-6)&lt;/span>&lt;/div>
&lt;/div>
</code></pre>
&lt;div class="row">
&lt;div class="col s12"> &lt;span class="flow-text">This div is 12-columns wide on all screen sizes &lt;/span> &lt;/div>
&lt;div class="col s6 offset-s6"> &lt;span class="flow-text">6-columns (offset-by-6) &lt;/span> &lt;/div>
&lt;/div>
&lt;div class="row">
&lt;div class="l6"> &lt;span class="flow-text">l6 column &lt;/span> &lt;/div>
&lt;div class="l4 offset-l8"> &lt;span class="flow-text">l4 column (offset-l8) &lt;/span> &lt;/div>
&lt;/div>
&lt;div class="row">
&lt;div class="l2 offset-l3"> &lt;span>offset-l3 &lt;/span> &lt;/div>
&lt;div class="l2 offset-l6"> &lt;span>offset-l6 &lt;/span> &lt;/div>
&lt;div class="l2 offset-l9"> &lt;span>offset-l9 &lt;/span> &lt;/div>
&lt;/div>
&lt;div class="row">
&lt;div class="l2"> &lt;span>col &lt;/span> &lt;/div>
&lt;div class="l2"> &lt;/div>
&lt;div class="l2"> &lt;span>relative offset 2 &lt;/span> &lt;/div>
&lt;/div>
</code></pre>
</div>




<!-- Gaps -->
<div id="grid-gaps" class="section scrollspy">
<h2 class="header">Gaps</h2>
<p class="green-text">New in V2.0.0, since CSS Grid is used.</p>
<p>You can easily change the Gap between the Grid. Simply add <code class="language-markup">style="gap:5px;"</code> to the row element to change the gap.</p>

<p>Without Gaps (normal):</p>
<p>Without Gaps (standard):</p>
<div class="row">
<div class="s3 grid-example">1</div>
<div class="s3 grid-example">2</div>
Expand All @@ -155,7 +189,7 @@ <h2 class="header">Gaps</h2>
<div class="s3 grid-example">8</div>
</div>

<p>Grid is with Gapsize 5px:</p>
<p>Grid with Gapsize 5px:</p>
<div class="row" style="gap: 5px;">
<div class="s3 grid-example">1</div>
<div class="s3 grid-example">2</div>
Expand Down Expand Up @@ -183,18 +217,12 @@ <h2 class="header">Gaps</h2>
<!-- Grid push and pull -->
<div id="grid-push" class="section scrollspy">
<h2 class="header">Push and Pull</h2>
<p class="red-text">Deprecated in V2.0.0, since CSS Grid is used.</p>
<p class="red-text">Deprecated in V2.0.0, since CSS Grid is used. You can use left and right (see offsets).</p>
<p>You can easily change the order of your columns with push and pull. Simply add <code class="language-markup">push-s2</code> or <code class="language-markup">pull-s2</code> to the class where <code class="language-markup">s</code> signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to push or pull by.</p>
<div class="row">
<div class="col s7 push-s5 grid-example"><span style="font-size: 14px;">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="col s5 pull-s7 grid-example"><span style="font-size: 14px;">5-columns wide pulled to the left by 7-columns.</span></div>
</div>
<pre><code class="language-markup">
&lt;div class="row">
&lt;div class="col s7 push-s5">&lt;span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.&lt;/span>&lt;/div>
&lt;div class="col s5 pull-s7">&lt;span class="flow-text">5-columns wide pulled to the left by 7-columns.&lt;/span>&lt;/div>
&lt;/div>
</code></pre>
</div>


Expand Down
2 changes: 1 addition & 1 deletion sass/components/_cards.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
}

.card {
overflow: hidden;
position: relative;
//margin: $element-top-margin 0 $element-bottom-margin 0;
background-color: $card-bg-color;
transition: box-shadow .25s;
border-radius: 12px;
@extend .z-depth-1;


.card-title {
font-size: 24px;
font-weight: 300;
Expand Down
5 changes: 5 additions & 0 deletions sass/components/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,11 @@ ul.staggered-list li {
}
}

.page-footer ul {
padding-left: 0;
list-style-type: none;
}

// Tables
table, th, td {
border: none;
Expand Down
Loading