Skip to content

Commit

Permalink
Add categories page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ogdenwebb
ogdenwebb committed Sep 11, 2020
1 parent 129a212 commit 22e597b
Show file tree
Hide file tree
Showing 6 changed files with 335 additions and 4 deletions.
2 changes: 1 addition & 1 deletion ui-samples/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,8 +304,8 @@ <h2 class="subtitle is-4 has-text-centered mt-3">
</div>
</section>

<!-- Wrapper ends -->
</div>
<!-- Wrapper ends -->

<footer class="footer main-footer">
<div class="container">
Expand Down
294 changes: 294 additions & 0 deletions ui-samples/dist/templates/categories.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,294 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Categories - Raku Docs</title>
<link rel="stylesheet" href="../css/main.css">

<script type="text/javascript" src="../js/core.js"></script>

<style type="text/css" media="screen"></style>

</head>
<body class="has-navbar-fixed-top">

<!-- Header -->
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="container">

<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src="../img/camelia-recoloured.png" width="52.83" height="38">
</a>

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>

<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Language
</a>

<a class="navbar-item">
Types
</a>

<a class="navbar-item">
Routines
</a>

<a class="navbar-item">
Programs
</a>


<a class="navbar-item">
Raku Homepage
</a>

<a class="navbar-item">
Chat with us
</a>

<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>

<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>

<div class="navbar-end">
<div class="navbar-item">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Search">
</div>

<div class="control">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-search "></i>
</span>
</a>
</div>
</div>

<!--
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
-->
</div>
</div>
</div>
</div>
</nav>
<!-- Header ends -->


<div id="wrapper">

<div class="raku page">

<section class="raku page-header">
<div class="container px-4">
<div class="raku page-title has-text-centered">Category</div>
<div class="raku page-subtitle has-text-centered">Desctiption</div>
</div>
</section>


<section class="raku page-content">
<div class="container">

<div class="columns">

<div class="column is-one-half">
<div class="raku-category category-block">
<div class="category-header has-text-centered">
Title
</div>

<div class="category-items">
<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>

<p>Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.</p>
</div>

<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>

<p>Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.</p>
</div>

<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>
<p>
Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.
</p>
</div>

</div>
</div>

<div class="raku-category category-block">
<div class="category-header has-text-centered">
Title
</div>

<div class="category-items">
<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>
<p>
Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.
</p>
</div>

<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>
<p>
Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.
</p>
</div>

</div>
</div>


</div>

<div class="column is-one-half">
<div class="raku-category category-block">
<div class="category-header has-text-centered">
Title
</div>

<div class="category-items">
<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>
<p>
Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.
</p>
</div>

<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>
<p>
Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.
</p>
</div>

</div>
</div>

<div class="raku-category category-block">
<div class="category-header has-text-centered">
Title
</div>

<div class="category-items">
<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>
<p>
Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.
</p>
</div>

<div class="category-item">
<div class="category-item-title">
<a href="#" class="search-item-title">Some title</a>
</div>
<p>
Et netus et malesuada fames ac? Commodo, ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit.
</p>
</div>

</div>
</div>

</div>


</div>

</div>
</section>

</div>


</div>
<!-- Wrapper ends -->

<footer class="footer">
<div class="container">

<nav class="level">
<div class="level-item">
<a href="#">About</a>
</div>

<div class="level-item">
<a href="#">Toggle theme</a>
</div>

<div class="level-item">
<p>
This website is licensed under
<a href="#">the Artistic License 2.0</a>
</p>
</div>
</nav>

</div>
</footer>

<!-- Include Font Awesome -->
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions ui-samples/dist/templates/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@

<div id="wrapper">

<div class="page-body">
<div class="raku page">

<section class="raku page-header">
<div class="container px-4">
Expand All @@ -208,8 +208,8 @@
</div>


<!-- Wrapper ends -->
</div>
<!-- Wrapper ends -->

<footer class="footer">
<div class="container">
Expand Down
2 changes: 1 addition & 1 deletion ui-samples/dist/templates/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,8 +200,8 @@
</div>


<!-- Wrapper ends -->
</div>
<!-- Wrapper ends -->

<footer class="footer">
<div class="container">
Expand Down
36 changes: 36 additions & 0 deletions ui-samples/sass/_custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,42 @@ body {
}
}

// Categories
.raku-category.category-block {
border: 1px solid $border;
border-bottom: 5px solid $grey-lighter;
box-shadow: 0px 2px 3px 0px rgba( 0, 0, 0, 0.07 );
margin-bottom: $size-5;

}

.raku-category {

.category-header {
background: $grey-lightest;
border-bottom: 1px solid $border;
color: $grey-dark;
padding: 0.35rem;
}

.category-items {
padding-top: 0.25rem;
padding-bottom: $size-7;
}

.category-item {
font-weight: $weight-medium;
padding: $size-6 $size-3;
border-bottom: 1px solid $border;
}

.category-item-title {
margin-bottom: 0.25rem;
}


}

// Workaround

// @include mobile {
Expand Down
1 change: 1 addition & 0 deletions ui-samples/sass/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

.footer {
height: auto;
padding: $size-6;
background-color: $grey-lightest;
}

Expand Down

0 comments on commit 22e597b

Please sign in to comment.