mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Add dropdown enhancements and new apps card with brand icons (#2249)
This commit is contained in:
Paweł Kuna
GitHub
@@ -109,6 +109,7 @@
|
||||
|
||||
.dropdown-menu-card {
|
||||
padding: 0;
|
||||
min-width: 20rem;
|
||||
|
||||
> .card {
|
||||
margin: 0;
|
||||
|
||||
@@ -184,6 +184,17 @@ a:hover:has(.icon) {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-hoverable {
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
transition: background-color .15s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
color: var(--#{$prefix}primary);
|
||||
background: color-transparent(var(--#{$prefix}secondary), .04);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Subheader
|
||||
*/
|
||||
|
||||
74
preview/pages/_data/brands.json
Normal file
74
preview/pages/_data/brands.json
Normal file
@@ -0,0 +1,74 @@
|
||||
[
|
||||
{"image": "amazon.svg", "name": "Amazon" },
|
||||
{"image": "android.svg", "name": "Android" },
|
||||
{"image": "app-store.svg", "name": "Apple App Store" },
|
||||
{"image": "apple-podcast.svg", "name": "Apple Podcast" },
|
||||
{"image": "apple.svg", "name": "Apple" },
|
||||
{"image": "behance.svg", "name": "Behance" },
|
||||
{"image": "discord.svg", "name": "Discord" },
|
||||
{"image": "dribbble.svg", "name": "Dribbble" },
|
||||
{"image": "dropbox.svg", "name": "Dropbox" },
|
||||
{"image": "ever-green.svg", "name": "Ever Green" },
|
||||
{"image": "facebook.svg", "name": "Facebook" },
|
||||
{"image": "figma.svg", "name": "Figma" },
|
||||
{"image": "font-awesome.svg", "name": "Font Awesome" },
|
||||
{"image": "google-ads.svg", "name": "Google Ads" },
|
||||
{"image": "google-adsense.svg", "name": "Google AdSense" },
|
||||
{"image": "google-analytics.svg", "name": "Google Analytics" },
|
||||
{"image": "google-cloud.svg", "name": "Google Cloud" },
|
||||
{"image": "google-drive.svg", "name": "Google Drive" },
|
||||
{"image": "google-fit.svg", "name": "Google Fit" },
|
||||
{"image": "google-home.svg", "name": "Google Home" },
|
||||
{"image": "google-maps.svg", "name": "Google Maps" },
|
||||
{"image": "google-meet.svg", "name": "Google Meet" },
|
||||
{"image": "google-photos.svg", "name": "Google Photos" },
|
||||
{"image": "google-play.svg", "name": "Google Play" },
|
||||
{"image": "google-shopping.svg", "name": "Google Shopping" },
|
||||
{"image": "google-teams.svg", "name": "Google Teams" },
|
||||
{"image": "google.svg", "name": "Google" },
|
||||
{"image": "instagram.svg", "name": "Instagram" },
|
||||
{"image": "klarna.svg", "name": "Klarna" },
|
||||
{"image": "linkedin.svg", "name": "LinkedIn" },
|
||||
{"image": "mailchimp.svg", "name": "Mailchimp" },
|
||||
{"image": "medium.svg", "name": "Medium" },
|
||||
{"image": "messenger.svg", "name": "Messenger" },
|
||||
{"image": "meta.svg", "name": "Meta" },
|
||||
{"image": "monday.svg", "name": "Monday" },
|
||||
{"image": "netflix.svg", "name": "Netflix" },
|
||||
{"image": "notion.svg", "name": "Notion" },
|
||||
{"image": "office-365.svg", "name": "Office 365" },
|
||||
{"image": "opera.svg", "name": "Opera" },
|
||||
{"image": "paypal.svg", "name": "PayPal" },
|
||||
{"image": "petreon.svg", "name": "Patreon" },
|
||||
{"image": "pinterest.svg", "name": "Pinterest" },
|
||||
{"image": "play-store.svg", "name": "Play Store" },
|
||||
{"image": "quora.svg", "name": "Quora" },
|
||||
{"image": "reddit.svg", "name": "Reddit" },
|
||||
{"image": "shopify.svg", "name": "Shopify" },
|
||||
{"image": "skype.svg", "name": "Skype" },
|
||||
{"image": "slack.svg", "name": "Slack" },
|
||||
{"image": "snapchat.svg", "name": "Snapchat" },
|
||||
{"image": "soundcloud.svg", "name": "SoundCloud" },
|
||||
{"image": "spotify.svg", "name": "Spotify" },
|
||||
{"image": "stripe.svg", "name": "Stripe" },
|
||||
{"image": "telegram.svg", "name": "Telegram" },
|
||||
{"image": "tiktok.svg", "name": "TikTok" },
|
||||
{"image": "tinder.svg", "name": "Tinder" },
|
||||
{"image": "trello.svg", "name": "Trello" },
|
||||
{"image": "truth.svg", "name": "Truth" },
|
||||
{"image": "tumblr.svg", "name": "Tumblr" },
|
||||
{"image": "twitch.svg", "name": "Twitch" },
|
||||
{"image": "twitter.svg", "name": "Twitter" },
|
||||
{"image": "vimeo.svg", "name": "Vimeo" },
|
||||
{"image": "vk.svg", "name": "VK" },
|
||||
{"image": "watppad.svg", "name": "Wattpad" },
|
||||
{"image": "webflow.svg", "name": "Webflow" },
|
||||
{"image": "whatsapp.svg", "name": "WhatsApp" },
|
||||
{"image": "wordpress.svg", "name": "WordPress" },
|
||||
{"image": "xing.svg", "name": "Xing" },
|
||||
{"image": "yelp.svg", "name": "Yelp" },
|
||||
{"image": "youtube.svg", "name": "YouTube" },
|
||||
{"image": "zapier.svg", "name": "Zapier" },
|
||||
{"image": "zendesk.svg", "name": "Zendesk" },
|
||||
{"image": "zoom.svg", "name": "Zoom" }
|
||||
]
|
||||
23
preview/pages/_includes/cards/navbar-apps.html
Normal file
23
preview/pages/_includes/cards/navbar-apps.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">My Apps</div>
|
||||
|
||||
<div class="card-actions btn-actions">
|
||||
<a href="#" class="btn-action">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body scroll-y p-2" style="max-height: 50vh">
|
||||
<div class="row g-0">
|
||||
{% for brand in brands %}
|
||||
<div class="col-4">
|
||||
<a href="#" class="d-flex flex-column flex-center text-center text-secondary py-2 px-2 link-hoverable">
|
||||
<img src="{{ page | relative }}/static/brands/{{ brand.image }}" class="w-6 h-6 mx-auto mb-2" width="24" height="24" alt="">
|
||||
<span class="h5">{{ brand.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +1,7 @@
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Last updates</h3>
|
||||
<div class="card-header d-flex">
|
||||
<h3 class="card-title">Notifications</h3>
|
||||
<div class="btn-close ms-auto" data-bs-dismiss="dropdown"></div>
|
||||
</div>
|
||||
<div class="list-group list-group-flush list-group-hoverable">
|
||||
<div class="list-group-item">
|
||||
@@ -68,4 +69,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col">{% include "ui/button.html" block text="Archive all" %}</div>
|
||||
<div class="col">{% include "ui/button.html" block text="Mark all as read" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -25,9 +25,8 @@
|
||||
{% include "ui/icon.html" icon="sun" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-item dropdown d-none d-md-flex me-3">
|
||||
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
|
||||
<div class="nav-item dropdown d-none d-md-flex">
|
||||
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
<span class="badge bg-red"></span>
|
||||
</a>
|
||||
@@ -35,6 +34,15 @@
|
||||
{% include "cards/navbar-notifications.html" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item dropdown d-none d-md-flex me-3">
|
||||
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
|
||||
{% include "ui/icon.html" icon="apps" %}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
|
||||
{% include "cards/navbar-apps.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-item dropdown">
|
||||
|
||||
Reference in New Issue
Block a user