Commitec845db

committed

breadcrumb dropdown styling

1 parentf367f18 commitec845dbCopy full SHA for ec845db

File tree

+83

-23

lines changed

+83

-23

lines changed

Lines changed: 11 additions & 4 deletions

Lines changed: 3 additions & 17 deletions

Original file line number	Diff line number	Diff line change
`@@ -12,30 +12,19 @@`
`12`	`12`
`13`	`13`	`<nav>`
`14`	`14`	`<navaria-label="breadcrumb z-1">`
`15`		`-<olclass="breadcrumb">`
`16`		`-<!-- <li class="breadcrumb-item body-regular-text <% if path.is_empty() {%>active<% } %>">`
`17`		`- <a class="d-flex gap-2 align-items-center" href="<%- home_uri %>">`
`18`		`- <span class="icon-owl icomoon"></span>`
`19`		`- Home`
`20`		`- </a>`
`21`		`- </li> -->`
`22`		`-`
	`15`	`+<olclass="breadcrumb gap-3">`
`23`	`16`	`<% if !organizations.is_empty() {%>`
`24`	`17`	`<li>`
`25`		`-<%+ Dropdown::nav(organizations) %>`
	`18`	`+<%+ Dropdown::nav(organizations).inline_style() %>`
`26`	`19`	`</li>`
`27`	`20`	`<% } %>`
`28`	`21`
`29`	`22`	`<% if !databases.is_empty() {%>`
`30`	`23`	`<li>`
`31`		`-<%+ Dropdown::nav(databases) %>`
	`24`	`+<%+ Dropdown::nav(databases).inline_style() %>`
`32`	`25`	`</li>`
`33`	`26`	`<% } %>`
`34`	`27`
`35`		`-<% if !path.is_empty() {%>`
`36`		`-<divclass="vr my-1 mx-2"></div>`
`37`		`-<% } %>`
`38`		`-`
`39`	`28`	`<% for link in path {`
`40`	`29`	`let active = if link.active {`
`41`	`30`	`"active"`
`@@ -54,9 +43,6 @@`
`54`	`43`	`<ahref="<%= link.href %>">`
`55`	`44`	`<%= link.name %>`
`56`	`45`	`</a>`
`57`		`-<% if active.is_empty() { %>`
`58`		`-<divclass="vr my-1 ms-2"></div>`
`59`		`-<% } %>`
`60`	`46`	`</li>`
`61`	`47`	`<% } %>`
`62`	`48`	`</ol>`

Lines changed: 45 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -92,6 +92,51 @@`
`92`	`92`	`}`
`93`	`93`	`}`
`94`	`94`
	`95`	`+.btn-dropdown-inline {`
	`96`	`+color:#{$slate-shade-100};`
	`97`	`+display:flex;`
	`98`	`+justify-content:space-between;`
	`99`	`+font-weight:$font-weight-normal;`
	`100`	`+`
	`101`	`+--bs-btn-hover-color:#{$slate-tint-400};`
	`102`	`+--bs-btn-active-color:#{$slate-tint-700};`
	`103`	`+--bs-btn-active-border-color:transparent;`
	`104`	`+`
	`105`	`+`
	`106`	`+`
	`107`	`+&:after {`
	`108`	`+content:None;`
	`109`	`+ }`
	`110`	`+`
	`111`	`+&.show {`
	`112`	`+.material-symbols-outlined {`
	`113`	`+transform:rotate(-180deg);`
	`114`	`+ }`
	`115`	`+ }`
	`116`	`+`
	`117`	`+.btn-dropdown-text {`
	`118`	`+overflow:hidden;`
	`119`	`+text-overflow:ellipsis;`
	`120`	`+text-align:left;`
	`121`	`+ }`
	`122`	`+`
	`123`	`+.menu-item {`
	`124`	`+a,div {`
	`125`	`+padding:8px12px;`
	`126`	`+overflow:hidden;`
	`127`	`+text-overflow:ellipsis;`
	`128`	`+ }`
	`129`	`+`
	`130`	`+&:hover {`
	`131`	`+cursor:pointer;`
	`132`	`+ }`
	`133`	`+`
	`134`	`+&:after {`
	`135`	`+content:None;`
	`136`	`+ }`
	`137`	`+ }`
	`138`	`+}`
	`139`	`+`
`95`	`140`	`@mixindropdown-menu($primary-color: null) {`
`96`	`141`	`padding:20px0px20px0px;`
`97`	`142`	`overflow-y:auto;`

Lines changed: 9 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,9 @@ pub struct Dropdown {`
`85`	`85`
`86`	`86`	`/// If the dropdown should be shown`
`87`	`87`	`show:String,`
	`88`	`+`
	`89`	`+/// alt styling for button`
	`90`	`+inline_style:bool,`
`88`	`91`	`}`
`89`	`92`
`90`	`93`	`implDropdown{`
`@@ -95,6 +98,7 @@ impl Dropdown {`
`95`	`98`	`offset:"0, 10".to_owned(),`
`96`	`99`	`offset_collapsed:"68, -44".to_owned(),`
`97`	`100`	`menu_position:"".to_owned(),`
	`101`	`+inline_style:false,`
`98`	`102`	`..Default::default()`
`99`	`103`	`}`
`100`	`104`	`}`
`@@ -192,6 +196,11 @@ impl Dropdown {`
`192`	`196`	`self.show ="show".into();`
`193`	`197`	`self`
`194`	`198`	`}`
	`199`	`+`
	`200`	`+pubfninline_style(mutself) ->Self{`
	`201`	`+self.inline_style =true;`
	`202`	`+self`
	`203`	`+}`
`195`	`204`	`}`
`196`	`205`
`197`	`206`	`component!(Dropdown);`

Lines changed: 15 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,21 @@`
`1`	`1`
`2`	`2`	`<% use crate::components::dropdown::DropdownValue; %>`
	`3`	`+<%`
	`4`	`+ let btn_style = if inline_style {`
	`5`	`+ "btn-dropdown-inline"`
	`6`	`+ } else {`
	`7`	`+ "btn-dropdown"`
	`8`	`+ };`
	`9`	`+`
	`10`	`+ let padding = if inline_style {`
	`11`	`+ "p-0"`
	`12`	`+ } else {`
	`13`	`+ ""`
	`14`	`+ };`
	`15`	`+%>`
`3`	`16`
`4`	`17`	`<!-- Dropdown component -->`
`5`		`-<divclass="dropdown <% if expandable { %>expandable<% } %>">`
	`18`	`+<divclass="dropdown <%- padding %> <% if expandable { %>expandable<% } %>">`
`6`	`19`	`<% if let DropdownValue::Icon(icon) = value { %>`
`7`	`20`	`<a`
`8`	`21`	`class="top-nav-controls dropdown-toggle"`
`@@ -15,7 +28,7 @@`
`15`	`28`	`</a>`
`16`	`29`	`<% } else if let DropdownValue::Text(text) = value { %>`
`17`	`30`	`<button`
`18`		`-class="horizontal-hide btnbtn-dropdown dropdown-toggle expanded <% if collapsable { %>leftnav-collapse-affect<% } %>"`
	`31`	`+class="horizontal-hide btn<%- btn_style %> dropdown-toggle expanded <% if collapsable { %>leftnav-collapse-affect<% } %>"`
`19`	`32`	`role="button"`
`20`	`33`	`data-bs-toggle="dropdown"`
`21`	`34`	`data-bs-offset="<%= offset %>"`

Comments

(0)