mirror of
https://github.com/tabler/tabler.git
synced 2026-08-01 07:54:38 +04:00
layouts page, search results, top menu
This commit is contained in:
codecalm
+12
-12
@@ -130,16 +130,16 @@ cyan-700: '#0e616e'
|
||||
cyan-800: '#09414a'
|
||||
cyan-900: '#052025'
|
||||
|
||||
gray: '#adb5bd'
|
||||
gray-100: '#f8f9fa'
|
||||
gray-200: '#e9ecef'
|
||||
gray-300: '#dee2e6'
|
||||
gray-400: '#ced4da'
|
||||
gray-500: '#adb5bd'
|
||||
gray-600: '#868e96'
|
||||
gray-700: '#495057'
|
||||
gray-800: '#343a40'
|
||||
gray-900: '#212529'
|
||||
gray: '#cdd1d8'
|
||||
gray-100: '#f5f7fb'
|
||||
gray-200: '#f1f3f8'
|
||||
gray-300: '#e9ecf1'
|
||||
gray-400: '#dee1e7'
|
||||
gray-500: '#cdd1d8'
|
||||
gray-600: '#aeb3bc'
|
||||
gray-700: '#8b929e'
|
||||
gray-800: '#5f6877'
|
||||
gray-900: '#354052'
|
||||
|
||||
border-color: '#dce3e9'
|
||||
text-muted: '#8a91a5'
|
||||
border-color: '#dee1e7'
|
||||
text-muted: '#8b929e'
|
||||
|
||||
+43
-3
@@ -1,3 +1,43 @@
|
||||
- name: sidebar-left
|
||||
title: Left sidebar
|
||||
url: layout-test.html
|
||||
- title: Default tabler layout
|
||||
config:
|
||||
topmenu: true
|
||||
|
||||
- title: Dark navigation
|
||||
config:
|
||||
topmenu: true
|
||||
topmenu-dark: true
|
||||
|
||||
- title: Sidebar
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
|
||||
- title: Dark sidebar
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
sidebar-dark: true
|
||||
|
||||
- title: Narrow sidebar
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
sidebar-narrow: true
|
||||
sidebar-dark: true
|
||||
|
||||
- title: Right sidebar
|
||||
new: true
|
||||
config:
|
||||
sidebar-right: true
|
||||
|
||||
- title: Sidebar only
|
||||
new: true
|
||||
config:
|
||||
sidebar: true
|
||||
hide-topnav: true
|
||||
|
||||
- title: Dark mode
|
||||
soon: true
|
||||
config:
|
||||
sidebar: true
|
||||
sidebar-dark: true
|
||||
|
||||
@@ -105,6 +105,9 @@ extra:
|
||||
blog:
|
||||
title: Blog cards
|
||||
url: blog.html
|
||||
search-results:
|
||||
title: Search results
|
||||
url: search-results.html
|
||||
docs:
|
||||
title: Documentation
|
||||
icon: file-text
|
||||
@@ -167,6 +170,9 @@ docs:
|
||||
input-mask:
|
||||
title: Form input mask
|
||||
url: docs/input-mask.html
|
||||
layout:
|
||||
title: Layout
|
||||
url: docs/layout.html
|
||||
progress:
|
||||
title: Progress
|
||||
url: docs/progress.html
|
||||
|
||||
+30
-45
@@ -1,53 +1,38 @@
|
||||
-
|
||||
name: Apple iPhone 7 Plus 256GB Red Special Edition
|
||||
image: apple-iphone7-special.jpg
|
||||
producer: Apple
|
||||
price: $499
|
||||
- image: product-1.jpg
|
||||
name: Container for a Fanta
|
||||
|
||||
-
|
||||
name: Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray
|
||||
image: apple-macbook-pro.jpg
|
||||
producer: Apple
|
||||
price: $1499
|
||||
- image: product-2.jpg
|
||||
name: Strange sunglasses
|
||||
|
||||
-
|
||||
name: Apple iPhone 7 32GB Jet Black
|
||||
image: apple-iphone7.jpg
|
||||
producer: Apple
|
||||
price: $499
|
||||
- image: product-3.jpg
|
||||
name: Pen Pineapple Apple Pen
|
||||
|
||||
-
|
||||
name: GoPro HERO6 Black
|
||||
image: gopro-hero.jpg
|
||||
producer: GoPro
|
||||
price: $599
|
||||
- image: product-4.jpg
|
||||
name: Binoculars
|
||||
|
||||
-
|
||||
name: MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
|
||||
image: msi.jpg
|
||||
producer: MSI
|
||||
price: $1599
|
||||
- image: product-5.jpg
|
||||
name: Magical notebook
|
||||
|
||||
-
|
||||
name: Xiaomi Mi A1 64GB Black
|
||||
image: xiaomi-mi.jpg
|
||||
producer: Xiaomi
|
||||
price: $269
|
||||
- image: product-6.jpg
|
||||
name: Dragonfly eyes
|
||||
|
||||
-
|
||||
name: Huawei Mate 10 Pro Dual SIM Gray
|
||||
image: huawei-mate.jpg
|
||||
producer: Huawei
|
||||
price: $999
|
||||
- image: product-7.jpg
|
||||
name: Fireman's pipe
|
||||
|
||||
-
|
||||
name: Sony KD-49XE7005
|
||||
image: sony-kd.jpg
|
||||
producer: Sony
|
||||
price: $799
|
||||
- image: product-8.jpg
|
||||
name: Garden shears
|
||||
|
||||
-
|
||||
name: Samsung Galaxy A5 A520F 2017 LTE Black Sky
|
||||
image: samsung-galaxy.jpg
|
||||
producer: Samsung
|
||||
price: $399
|
||||
- image: product-9.jpg
|
||||
name: Ironman wallet
|
||||
|
||||
- image: product-10.jpg
|
||||
name: Blue notebook
|
||||
|
||||
- image: product-11.jpg
|
||||
name: Morning alarm clock
|
||||
|
||||
- image: product-12.jpg
|
||||
name: Spy camera
|
||||
|
||||
- image: product-13.jpg
|
||||
name: Housefly
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Page Layouts
|
||||
done: true
|
||||
---
|
||||
|
||||
Tabler includes a number of utility pages to help speed up development of your project management web application
|
||||
|
||||
{% include layout/layouts-list.html wide=true class="mt-6" %}
|
||||
@@ -0,0 +1,24 @@
|
||||
<div class="card card-sm">
|
||||
<a href="#" class="d-block"><img src="{{ site.base }}/static/photos/{{ photo.file }}" class="card-img-top"></a>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
|
||||
<div class="lh-sm">
|
||||
<div>{{ include.person.full_name }}</div>
|
||||
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
|
||||
</div>
|
||||
{% unless include.hide-likes %}
|
||||
<div class="ml-auto">
|
||||
<a href="#" class="text-muted">
|
||||
{% include ui/icon.html icon="eye" %}
|
||||
{{ forloop.index | random_number: 300, 600 }}
|
||||
</a>
|
||||
<a href="#" class="ml-3 text-muted">
|
||||
{% include ui/icon.html icon="heart" %}
|
||||
{{ forloop.index | random_number: 20, 100 }}
|
||||
</a>
|
||||
</div>
|
||||
{% endunless %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,22 +0,0 @@
|
||||
<div class="card card-sm">
|
||||
<div class="card-body">
|
||||
<a href="#" class="mb-3 d-block"><img src="{{ site.base }}/static/photos/{{ photo.file }}" class="rounded"></a>
|
||||
<div class="d-flex align-items-center">
|
||||
{% include ui/avatar.html person=include.person class="mr-3 rounded" %}
|
||||
<div class="lh-sm">
|
||||
<div>{{ include.person.full_name }}</div>
|
||||
<div class="text-muted">{{ forloop.index | random_date_ago: 10 | timeago }}</div>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
<a href="#" class="text-muted">
|
||||
{% include ui/icon.html icon="eye" %}
|
||||
{{ forloop.index | random_number: 300, 600 }}
|
||||
</a>
|
||||
<a href="#" class="ml-3 text-muted">
|
||||
{% include ui/icon.html icon="heart" %}
|
||||
{{ forloop.index | random_number: 20, 100 }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,13 +1,11 @@
|
||||
{% assign product = site.data.products[include.product] %}
|
||||
{% assign product-id = include.product-id | default: 1 %}
|
||||
{% assign product = site.data.products[product-id] %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="mb-4 text-center">
|
||||
<img src="{{ site.base }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
|
||||
</div>
|
||||
<h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
|
||||
<div class="text-muted">
|
||||
{{ product.producer }}
|
||||
</div>
|
||||
<div class="mt-5 d-flex align-items-center">
|
||||
<div class="h3 mb-0">
|
||||
<strong>{{ product.price }}</strong>
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
<div class="row row-deck">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/sales.html %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/revenue.html %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/new-clients.html %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/sales.html %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/revenue.html %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/new-clients.html %}
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/active-users.html %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
{% include cards/charts/active-users.html %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{% include cards/project-summary.html stage-color="red" %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{% include cards/project-summary.html stage-color="red" %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
|
||||
</div>
|
||||
|
||||
<div class="col-6 col-sm-4">
|
||||
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
{% include cards/small-stats-3.html number=95 number-prefix="$" title="Daily Earnings" percentage=-2 %}
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{% include cards/map.html title="Top users" %}
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
{% include cards/small-stats-3.html number=95 number-prefix="$" title="Daily Earnings" percentage=-2 %}
|
||||
</div>
|
||||
<div class="col-6 col-sm-4">
|
||||
{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{% include cards/map.html title="Top users" %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
{% include cards/development-activity.html %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-deck">
|
||||
<div class="col-md-12">
|
||||
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
{% include cards/development-activity.html %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-deck">
|
||||
<div class="col-md-12">
|
||||
{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include cards/invoices.html %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include cards/invoices.html %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{% include cards/table-users.html %}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
{% include cards/table-users.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<div class="row row-md mb-n{% if include.wide %}5{% else %}6{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% for layout in site.data.layouts %}
|
||||
<div class="col-{% if include.wide %}12{% else %}6{% endif %} mb-{% if include.wide %}5{% else %}6{% endif %}{% if layout.soon %} opacity-25{% endif %}">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<a href="{{ site.base }}/{{ layout.page }}">
|
||||
{% include parts/demo-layout.html topmenu=layout.config.topmenu topmenu-dark=layout.config.topmenu-dark sidebar=layout.config.sidebar sidebar-narrow=layout.config.sidebar-narrow sidebar-right=layout.config.sidebar-right sidebar-dark=layout.config.sidebar-dark hide-topnav=layout.config.hide-topnav %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>
|
||||
<a href="{{ site.base }}/{{ layout.page }}">{{ layout.title }}</a>
|
||||
{% if layout.new %}
|
||||
{% include ui/badge.html text="New" color="green" class="ml-2" %}
|
||||
{% elsif layout.soon %}
|
||||
{% include ui/badge.html text="Soon!" color="yellow" class="ml-2" %}
|
||||
{% endif %}
|
||||
</h3>
|
||||
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam assumenda atque consequatur.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -1,9 +1,5 @@
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% for layout in site.data.layouts %}
|
||||
<a href="{{ layout.url }}" class="d-block">
|
||||
{{ layout.title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
{% include layout/layouts-list.html %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,46 +1,49 @@
|
||||
{% assign current-page = page.menu | default: layout.menu | split: '.' %}
|
||||
<ul class="navbar-nav flex-wrap{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
{% for level-1 in site.data.menu %}
|
||||
{% assign icon = level-1[1].icon %}
|
||||
|
||||
{% assign has-children = false %}
|
||||
{% if level-1[1].children %}
|
||||
{% assign has-children = true %}
|
||||
{% endif %}
|
||||
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
|
||||
<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
|
||||
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
|
||||
%}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
|
||||
%}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
|
||||
<span class="nav-icon">
|
||||
{% include ui/icon.html icon=icon %}
|
||||
</span>
|
||||
<span class="nav-text">
|
||||
{{ level-1[1].title }}
|
||||
|
||||
<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if has-children %} dropdown{% endif %}">
|
||||
<a class="nav-link{% if has-children %} dropdown-toggle{% endif %}" {% if has-children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
|
||||
aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
|
||||
%}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
|
||||
%}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
|
||||
<span class="nav-icon">
|
||||
{% include ui/icon.html icon=icon %}
|
||||
</span>
|
||||
<span class="nav-text">
|
||||
{{ level-1[1].title }}
|
||||
{% unless include.top %}
|
||||
{% if level-1[1].label %}
|
||||
<span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{% unless include.top %}
|
||||
{% if level-1[1].label %}
|
||||
<span class="badge bg-{{ level-1[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-1[1].label }}</span>
|
||||
{% endif %}
|
||||
{% endunless %}
|
||||
</span>
|
||||
</a>
|
||||
{% if level-1[1].children %}
|
||||
<div class="dropdown-menu">
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<div class="dropright">
|
||||
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
|
||||
<span class="nav-text">
|
||||
{{ level-2[1].title }}
|
||||
{% if level-2[1].label %}
|
||||
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if has-children %}
|
||||
<div class="dropdown-menu">
|
||||
{% for level-2 in level-1[1].children %}
|
||||
<a class="dropdown-item" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
|
||||
<span class="nav-text">
|
||||
{{ level-2[1].title }}
|
||||
{% if level-2[1].label %}
|
||||
<span class="badge bg-{{ level-2[1].label-color | default: 'primary' }} text-white ml-auto">{{ level-2[1].label }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="">AA</a></li>
|
||||
<li><a href="">BB</a></li>
|
||||
<li><a href="">CC</a></li>
|
||||
</ul>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -2,46 +2,46 @@
|
||||
{% assign person = site.data.people[person-id] %}
|
||||
|
||||
{% if include.menu-layout != 'vertical' %}
|
||||
{% include layout/navbar-logo.html class="mr-4" %}
|
||||
{% include layout/navbar-logo.html class="mr-4" %}
|
||||
{% else %}
|
||||
{% include layout/navbar-search.html class="mr-4" %}
|
||||
{% include layout/navbar-search.html class="mr-4" %}
|
||||
{% endif %}
|
||||
|
||||
<ul class="nav navbar-menu align-items-center ml-auto">
|
||||
<li class="nav-item d-none d-lg-flex mr-3">
|
||||
{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" icon-color="github" external=true %}
|
||||
</li>
|
||||
<li class="nav-item d-none d-lg-flex mr-3">
|
||||
{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" icon-color="github" external=true %}
|
||||
</li>
|
||||
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" data-toggle="dropdown"
|
||||
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
||||
{% include ui/avatar.html src=person.photo size="sm" %}
|
||||
<span class="ml-2 d-none d-lg-block lh-1">
|
||||
{{ person.full_name }}
|
||||
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
|
||||
<span class="badge bg-primary ml-auto">6</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" data-toggle="dropdown"
|
||||
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2">
|
||||
{% include ui/avatar.html src=person.photo size="sm" %}
|
||||
<span class="ml-2 d-none d-lg-block lh-1">
|
||||
{{ person.full_name }}
|
||||
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
||||
</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
|
||||
<span class="badge bg-primary ml-auto">6</span>
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -2,30 +2,30 @@
|
||||
|
||||
<!-- Page title actions -->
|
||||
<div class="col-auto ml-auto d-print-none">
|
||||
{% if actions == 'users' %}
|
||||
<div class="d-flex">
|
||||
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
|
||||
{% include ui/button.html text="New user" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif actions == 'calendar' %}
|
||||
<div class="d-flex">
|
||||
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif actions == 'photos' %}
|
||||
<div class="d-flex">
|
||||
<div class="mr-3">
|
||||
{% include ui/form/input-icon.html %}
|
||||
</div>
|
||||
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif actions == 'breadcrumb' %}
|
||||
<div class="d-flex">
|
||||
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
|
||||
</div>
|
||||
{% elsif actions == 'buttons' %}
|
||||
<span class="d-none d-sm-inline">
|
||||
{% if actions == 'users' %}
|
||||
<div class="d-flex">
|
||||
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
|
||||
{% include ui/button.html text="New user" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif actions == 'calendar' %}
|
||||
<div class="d-flex">
|
||||
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif actions == 'photos' %}
|
||||
<div class="d-flex">
|
||||
<div class="mr-3">
|
||||
{% include ui/form/input-icon.html %}
|
||||
</div>
|
||||
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif actions == 'breadcrumb' %}
|
||||
<div class="d-flex">
|
||||
{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
|
||||
</div>
|
||||
{% elsif actions == 'buttons' %}
|
||||
<span class="d-none d-sm-inline">
|
||||
{% include ui/button.html text="New view" color="secondary" icon="plus" %}
|
||||
</span>
|
||||
{% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
|
||||
{% endif %}
|
||||
{% include ui/button.html text="Create new report" color="primary" class="ml-3" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<header class="topnav topbar">
|
||||
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
{% include layout/menu.html top=true %}
|
||||
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark{% else %}navbar-light{% endif %}">
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
{% include layout/menu.html top=true %}
|
||||
|
||||
{% include layout/navbar-search.html %}
|
||||
</div>
|
||||
</div>
|
||||
{% include layout/navbar-search.html %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<header class="topnav topbar">
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
||||
{% include layout/navbar.html search=true menu-layout=page.menu-layout %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container{% if include.fluid %}-fluid{% endif %}">
|
||||
<div class="navbar navbar-expand-lg {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.sticky %} navbar-sticky{% endif %}">
|
||||
{% include layout/navbar.html search=true menu-layout=page.menu-layout %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<div class="border rounded w-8 h-7 bg-light shadow-sm mx-auto d-flex flex-column">
|
||||
<div class="row row-0 flex-fill">
|
||||
{% if include.sidebar %}
|
||||
<div class="{% if include.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if include.sidebar-dark %}bg-dark{% else %}border-right bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
<div class="col">
|
||||
{% unless include.hide-topnav %}
|
||||
<div class="border-bottom h-2 bg-white"></div>
|
||||
{% endunless %}
|
||||
{% if include.topmenu %}
|
||||
<div class="h-2 {% if include.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if include.sidebar-right %}
|
||||
<div class="col-3 {% if include.sidebar-dark %}bg-dark{% else %}border-left bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,62 @@
|
||||
<form action="" method="get">
|
||||
|
||||
<div class="subheader mb-2">Category</div>
|
||||
{% assign items = "Games,Clothing,Jewelery,Toys" | split: "," %}
|
||||
<div class="list-group list-group-transparent mb-3">
|
||||
{% for item in items %}
|
||||
<a class="list-group-item list-group-item-action d-flex align-items-center{% if forloop.first %} active{% endif %}" href="#">
|
||||
{{ item }}
|
||||
<small class="text-muted ml-auto">{{ forloop.index | random_number: 11, 200 }}</small>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="subheader mb-2">Rating</div>
|
||||
{% assign items = "5 stars,4 stars,3 stars,2 and less stars" | split: "," %}
|
||||
<div class="mb-3">
|
||||
{% for item in items %}
|
||||
<label class="form-check mb-1">
|
||||
<input type="radio" class="form-check-input" name="form-stars" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
|
||||
<span class="form-check-label">{{ item }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="subheader mb-2">Tags</div>
|
||||
{% assign items = "business,evening,leisure,party" | split: "," %}
|
||||
<div class="mb-3">
|
||||
{% for item in items %}
|
||||
<label class="form-check mb-1">
|
||||
<input type="checkbox" class="form-check-input" name="form-tags[]" value="{{ item | escape }}"{% if forloop.first %} checked{% endif %}>
|
||||
<span class="form-check-label">{{ item }}</span>
|
||||
</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="subheader mb-2">Price</div>
|
||||
<div class="row row-sm align-items-center mb-3">
|
||||
<div class="col">
|
||||
{% include ui/form/input-group.html prepend="$" placeholder="from" value="3" %}
|
||||
</div>
|
||||
<div class="col-auto">—</div>
|
||||
<div class="col">
|
||||
{% include ui/form/input-group.html prepend="$" placeholder="to" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="subheader mb-2">Shipping</div>
|
||||
<div>
|
||||
<select name="" class="form-select">
|
||||
<option>United Kingdom</option>
|
||||
<option>USA</option>
|
||||
<option>Germany</option>
|
||||
<option>Poland</option>
|
||||
<option>Other…</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
{% include ui/button.html text="Confirm changes" color="primary" block=true element="button" %}
|
||||
{% include ui/button.html text="Reset to defaults" color="link" block=true %}
|
||||
</div>
|
||||
</form>
|
||||
@@ -9,9 +9,7 @@ page-title: Documentation
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-3 order-lg-1 mb-4">
|
||||
<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
|
||||
{% include ui/icon.html icon="github" class="mr-2" %}Browse source code
|
||||
</a>
|
||||
{% include ui/button.html href=site.github_url text="Browse source code" icon="brand/github" icon-color="github" external=true block=true class="mb-4" %}
|
||||
|
||||
<div class="list-group list-group-transparent mb-0">
|
||||
{% for doc in site.data.menu.docs.children %}
|
||||
|
||||
+1
-1
@@ -13,7 +13,7 @@ menu: base.gallery
|
||||
{% if photo.horizontal %}
|
||||
{% assign person = site.data.people[forloop.index0] %}
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
{% include cards/gallery.html person=person %}
|
||||
{% include cards/gallery-photo.html person=person %}
|
||||
</div>
|
||||
{% assign horizontal = horizontal | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
page-title: Search results
|
||||
page-title-description: About 2,410 result (0.19 seconds)
|
||||
menu: extra.search-results
|
||||
menu-layout: horizontal
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
{% include parts/nav/nav-aside.html %}
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="row">
|
||||
{% for photo in site.data.photos %}
|
||||
{% if photo.horizontal %}
|
||||
{% assign person = site.data.people[forloop.index0] %}
|
||||
<div class="col-sm-6 col-lg-4">
|
||||
{% include cards/gallery-photo.html person=person hide-likes=true %}
|
||||
</div>
|
||||
{% assign horizontal = horizontal | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% if horizontal == 12 %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+2
-2
@@ -8,10 +8,10 @@ page-title: Store
|
||||
<div class="col-lg-3">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-12">
|
||||
{% include cards/store-product.html product=0 %}
|
||||
{% include cards/store-product.html product-id=0 %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-12">
|
||||
{% include cards/store-product.html product=3 %}
|
||||
{% include cards/store-product.html product-id=3 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
page-title: Search results
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
|
||||
Reference in New Issue
Block a user