1
0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00

topbar search

This commit is contained in:
chomik
2019-06-01 19:51:59 +02:00
parent a0c2c446b9
commit d1839ec1ae
11 changed files with 101 additions and 74 deletions
+1 -1
View File
@@ -12,7 +12,7 @@
{% if include.show-form %}
<form action="">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
<input type="text" class="form-control form-control-sm" placeholder="Search something&hellip;" name="s">
<span class="input-group-btn ml-2">
<button class="btn btn-sm btn-default" type="submit">
<span class="fe fe-search"></span>
+3 -3
View File
@@ -35,7 +35,7 @@
<div class="form-group">
<label class="form-label">Input group</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
<span class="input-group-append">
<button class="btn btn-primary" type="button">Go!</button>
</span>
@@ -71,7 +71,7 @@
<label class="form-label">Separated inputs</label>
<div class="row row-xs">
<div class="col">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<span class="col-auto">
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
@@ -82,7 +82,7 @@
<label class="form-label">ZIP Code</label>
<div class="row row-sm">
<div class="col">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
</div>
<span class="col-auto align-self-center">
<span class="form-help" data-toggle="popover" data-placement="top"
+1 -1
View File
@@ -12,7 +12,7 @@
</a>
</div>
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis dolorem earum et, fugiat illum
incidunt modi ne... </p>
incidunt modi ne&hellip; </p>
{% include ui/avatar-list.html text="+5" %}
</div>
</div>
-3
View File
@@ -1,3 +0,0 @@
<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
{% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
</header>
+8
View File
@@ -1,5 +1,13 @@
<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
{% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=false white-logo=include.dark %}
</header>
{% comment %}
{% if page.nav-position == "top" or page.nav-position == "all" %}
<header class="navbar navbar-expand-md">
<div class="container">
{% include layout/menu.html %}
</div>
</header>
{% endif %}
{% endcomment %}
+2 -2
View File
@@ -1,7 +1,7 @@
<div class="form-group">
<label class="form-label">Icon input</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="Search for...">
<input type="text" class="form-control" placeholder="Search for&hellip;">
<span class="input-icon-addon">
{% include ui/icon.html icon="search" %}
</span>
@@ -12,4 +12,4 @@
</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
+18 -18
View File
@@ -11,10 +11,22 @@
<a href="{{ site.base }}" class="navbar-brand text-inherit">
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
{% if include.logo %}<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
{% if include.logo %}
<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo mr-3">
<img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo mr-3">
{% endif %}
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
</a>
{% if include.search %}
<div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
<div class="input-icon">
<span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
{% endif %}
{% if include.plus-left %}
<a href="#" class="btn btn-primary">
{% include ui/icon.html icon="plus" %}
@@ -59,18 +71,6 @@
</li>
</ul>
{% endif %}
{% if include.search %}
<!-- Navbar Search -->
<form class="input-group m-2 my-lg-0 ">
<span class="input-group-prepend">
<button type="button"
class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
</span>
<input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
data-plugin="typeahead">
</form>
{% endif %}
</div>
<ul class="nav navbar-menu order-1 order-lg-2">
@@ -129,8 +129,8 @@
<a href="#" data-toggle="dropdown"
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
{% if include.user-menu == 1 %}
{% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none">
{% include ui/avatar.html src=person.photo %}
<span class="ml-2 d-none d-lg-block leading-none">
<span>{{ person.full_name }}</span>
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
</span>
@@ -157,14 +157,14 @@
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
</a>
<a class="dropdown-item" href="#">
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
{% 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?
{% 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
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
</a>
</div>
</li>
+1 -1
View File
@@ -1,4 +1,4 @@
{% assign elem = include.element | default: 'div' %}
<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status">
<span class="sr-only">loading...</span>
<span class="sr-only">loading&hellip;</span>
</{{ elem }}>