Skip to content

Commit

Permalink
Simplified Avatar and Breadcrumb
Browse files Browse the repository at this point in the history 
Signed-off-by: praveenjuge <[email protected]>
  • Loading branch information
praveenjuge committed Nov 1, 2020
1 parent ccd90e1 commit 91a3845
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 118 deletions.
32 changes: 16 additions & 16 deletions docs/content/docs/avatar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ title: Avatar

<div class="space-x-2 flex">
<div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar"><span class="avatar-initial">PJ</span></div>
<div class="avatar avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
<div class="avatar">PJ</div>
<div class="avatar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
</div>
{{< /code >}}

Expand All @@ -23,11 +23,11 @@ title: Avatar
<div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar avatar-lg"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar avatar-xl"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar avatar-xs"><span class="avatar-initial">PJ</span></div>
<div class="avatar avatar-sm"><span class="avatar-initial">PJ</span></div>
<div class="avatar"><span class="avatar-initial">PJ</span></div>
<div class="avatar avatar-lg"><span class="avatar-initial">PJ</span></div>
<div class="avatar avatar-xl"><span class="avatar-initial">PJ</span></div>
<div class="avatar avatar-xs">PJ</div>
<div class="avatar avatar-sm">PJ</div>
<div class="avatar">PJ</div>
<div class="avatar avatar-lg">PJ</div>
<div class="avatar avatar-xl">PJ</div>
</div>
{{< /code >}}

Expand All @@ -38,8 +38,8 @@ title: Avatar
<div class="space-x-2 flex">
<div class="avatar avatar-online"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar avatar-focused"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar avatar-offline"><span class="avatar-initial">PJ</span></div>
<div class="avatar avatar-busy avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
<div class="avatar avatar-offline">PJ</div>
<div class="avatar avatar-busy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
</div>
{{< /code >}}

Expand All @@ -50,9 +50,9 @@ title: Avatar
<div class="flex -space-x-5">
<div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar"><span class="avatar-initial">PJ</span></div>
<div class="avatar">PJ</div>
<div class="avatar"><img src="/placeholder.jpg" alt="Photo of Praveen Juge"></div>
<div class="avatar"><span class="avatar-initial">PJ</span></div>
<div class="avatar">PJ</div>
</div>
{{< /code >}}

Expand All @@ -71,10 +71,10 @@ title: Avatar
{{< code html >}}

<div class="space-x-2 flex">
<div class="avatar avatar-icon avatar-xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
<div class="avatar avatar-icon avatar-sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
<div class="avatar avatar-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
<div class="avatar avatar-icon avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
<div class="avatar avatar-icon avatar-xl"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></div>
<div class="avatar avatar-xs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
<div class="avatar avatar-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
<div class="avatar"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
<div class="avatar avatar-lg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
<div class="avatar avatar-xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /></svg></div>
</div>
{{< /code >}}
38 changes: 19 additions & 19 deletions docs/content/docs/breadcrumb.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: Breadcrumb

{{< code html >}}

<div class="space-y-2">
<div class="space-y-4">
<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item" aria-current="page">Dashboard</li>
Expand Down Expand Up @@ -35,7 +35,7 @@ title: Breadcrumb

{{< code html >}}

<div class="space-y-2">
<div class="space-y-4">
<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
Expand Down Expand Up @@ -67,19 +67,19 @@ title: Breadcrumb

{{< code html >}}

<div class="space-y-2">
<div class="space-y-4">
<nav aria-label="breadcrumb">
<ul class="breadcrumb bg-gray-100">
<ul class="breadcrumb p-2 rounded bg-gray-100">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#">Reports</a></li>
<li class="breadcrumb-item" aria-current="page">Export</li>
</ul>
</nav>

<nav aria-label="breadcrumb">
<ul class="breadcrumb breadcrumb-dark">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#">Reports</a></li>
<ul class="breadcrumb p-2 rounded breadcrumb-dark bg-gray-900">
<li class="breadcrumb-item"><a href="#" class="text-white">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#" class="text-white">Reports</a></li>
<li class="breadcrumb-item" aria-current="page">Export</li>
</ul>
</nav>
Expand All @@ -91,7 +91,7 @@ title: Breadcrumb

{{< code html >}}

<div class="space-y-2">
<div class="space-y-4">
<nav aria-label="breadcrumb">
<ul class="breadcrumb breadcrumb-sm">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
Expand Down Expand Up @@ -123,45 +123,45 @@ title: Breadcrumb

{{< code html >}}

<div class="space-y-2">
<div class="space-y-4">
<nav aria-label="breadcrumb">
<ul class="breadcrumb breadcrumb-sm">
<li class="breadcrumb-item">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> Dashboard</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> Dashboard</a>
</li>
<li class="breadcrumb-item">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg> Reports</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg> Reports</a>
</li>
<li class="breadcrumb-item" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg> Export
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v4m0 0l-2-2m2 2l2-2" /></svg> Export
</li>
</ul>
</nav>

<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> Dashboard</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> Dashboard</a>
</li>
<li class="breadcrumb-item">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg> Reports</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg> Reports</a>
</li>
<li class="breadcrumb-item" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg> Export
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v4m0 0l-2-2m2 2l2-2" /></svg> Export
</li>
</ul>
</nav>

<nav aria-label="breadcrumb">
<ul class="breadcrumb breadcrumb-lg">
<li class="breadcrumb-item">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg> Dashboard</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" /></svg> Dashboard</a>
</li>
<li class="breadcrumb-item">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg> Reports</a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z" clip-rule="evenodd" /><path d="M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z" /></svg> Reports</a>
</li>
<li class="breadcrumb-item" aria-current="page">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg> Export
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" /><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v4m0 0l-2-2m2 2l2-2" /></svg> Export
</li>
</ul>
</nav>
Expand All @@ -173,7 +173,7 @@ title: Breadcrumb

{{< code html >}}

<div class="space-y-2">
<div class="space-y-4">
<nav aria-label="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
Expand Down
4 changes: 2 additions & 2 deletions docs/layouts/partials/component-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

<nav role="navigation" class="fixed top-0 left-0 right-0 z-40 h-full overflow-hidden outline-none bg-white overflow-y-auto p-2 pb-20 border-transparent md:border-gray-200 w-full md:w-1/4 lg:w-1/6 transform origin-left -translate-x-full md:translate-x-0 transition ease-out duration-100" style="top: 58px" :class="{ '-translate-x-full' : sideBar }">
{{ range where .Site.Pages.ByWeight "Section" "docs" }} {{ if eq .Permalink $current.Permalink }}
<a class="text-center md:text-left relative flex px-3 py-2 md:py-1 text-sm mt-0 flex-col rounded leading-relaxed font-medium text-gray-700 no-underline hover:text-primary text-primary bg-primary-light bg-opacity-50" href="#main" aria-describedby="current">
<a class="text-left px-3 py-2 md:py-1 text-sm flex rounded leading-relaxed font-medium text-primary bg-primary-light bg-opacity-50" href="#main" aria-describedby="current">
<span class="sr-only">(Current Page)</span>
{{ .Title }}
</a>
{{ else }}
<a class="text-center md:text-left relative flex px-3 py-2 md:py-1 text-sm mt-0 flex-col rounded leading-relaxed font-medium text-gray-700 no-underline hover:text-primary" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
<a class="text-left px-3 py-2 md:py-1 text-sm flex rounded leading-relaxed font-medium text-gray-700 hover:text-primary" href="{{ .Permalink | absLangURL }}">{{ .Title }}</a>
{{ end }} {{ end }}
</nav>
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@
],
"scripts": {
"start": "cross-env NODE_ENV=development concurrently \"nodemon -e js,html,md --exec 'npm run tailwind'\" \"cd docs && hugo server --disableFastRender\" \"rollup -w --config ./docs/rollup.config.js --context window\"",
"production": "cross-env NODE_ENV=production npx tailwindcss build -o ./docs/static/build.css --config ./docs/tailwind.config.js && rollup --compact -c --context window && cd docs && hugo --minify",
"tailwind": "npx tailwindcss build -o ./docs/static/build.css --config ./docs/tailwind.config.js"
"production": "cross-env NODE_ENV=production npm run tailwind && rollup --compact -c --context window && cd docs && hugo --minify",
"tailwind": "./node_modules/tailwindcss/lib/cli.js build -o ./docs/static/build.css --config ./docs/tailwind.config.js"
},
"devDependencies": {
"concurrently": "^5.3.0",
"cross-env": "^7.0.2",
"nodemon": "^2.0.6",
"rollup": "^2.32.1",
"rollup": "^2.33.0",
"rollup-plugin-terser": "^7.0.2",
"tailwindcss": "^1.9.6"
},
Expand Down
Loading

0 comments on commit 91a3845

Please sign in to comment.