phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

prosilver French edition

Quick links (responsive code not loading in perso.css) - prosilver French edition

Quick links (responsive code not loading in perso.css)

by bennybernaer » Sat Jun 29, 2024 8:21 pm

I've been playing again. I added a new quick links code/icon.

Code: Select all

		<li id="quick-links" class="quick-links dropdown-container responsive-menu{% if not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH %} hidden{% endif %}" data-skip-responsive="true">
			<a href="#" class="dropdown-trigger">
				<span class="quick-icon"><span class="qi-line"></span><span class="qi-line"></span><span class="qi-line"></span></span><span class="quick-text">{L_QUICK_LINKS}</span>
			</a>

Code: Select all

/* quick links
---------------------------------------- */
.quick-icon {
	display: inline-block;
	position: relative;
	width: 24px;
	height: 18px;
	cursor: pointer;
	margin-right: 10px;
	vertical-align: text-top;
	-webkit-tap-highlight-color: rgba(0,0,0,.1);
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-timing-function: cubic-bezier(.6,0,.41,1);
	transition-timing-function: cubic-bezier(.6,0,.41,1);
}

.quick-icon .qi-line {
	position: absolute;
	left: 0;
	right: 0;
	border-top: 2px solid var(--color01);
	border-radius: 2px;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-timing-function: cubic-bezier(.6,0,.41,1);
	transition-timing-function: cubic-bezier(.6,0,.41,1);
	display: block;
}

.quick-icon .qi-line:first-child {
	top: 3px;
}

.quick-icon .qi-line:nth-child(2) {
	top: 50%;
}

.quick-icon .qi-line:nth-child(3) {
	bottom: 1px;
	left: 30%;
}

.dropdown-visible .quick-icon .qi-line {
	border-color:  var(--color11);
}

a:hover .quick-icon .qi-line {
	border-color: var(--color11);
}

a:hover .qi-line:nth-child(2),a:hover .qi-line:nth-child(3) {
	left: 0;
}

.dropdown-visible .quick-icon .qi-line:first-child,.dropdown-visible .quick-icon .qi-line:nth-child(2) {
	top: 50%;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	left: 0;
	right: 0;
}

.dropdown-visible .quick-icon .qi-line:nth-child(2) {
	opacity: 0;
}

.dropdown-visible .quick-icon .qi-line:nth-child(3) {
	bottom: calc(50% - 2px);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 0;
}
Everything works properly, except the part below does not load in perso.css. It only allows if I place it directly in prosilver/theme/responsive.css. Anyone have an idea how this actually happens?

Code: Select all

@media (max-width: 500px) {
	.quick-links .dropdown-trigger span.quick-text {
		display: none;
	}
}
User avatar
bennybernaer
Registered User
Posts: 674
Joined: Tue Mar 22, 2011 9:53 pm
Top

Re: Quick links (responsive code not loading in perso.css)

by Mazeltof » Mon Jul 01, 2024 6:17 pm

hi here,

this css rule is not in your perso.css style sheet
can you put it there so that we can see the problem online?

you can leave the one in responsive.css in the meantime
User avatar
Mazeltof
Registered User
Posts: 103
Joined: Wed Sep 28, 2016 5:18 pm
Location: Arras - France
Top

Re: Quick links (responsive code not loading in perso.css)

by bennybernaer » Mon Jul 01, 2024 6:41 pm

Mazeltof wrote:hi here,

this css rule is not in your perso.css style sheet
can you put it there so that we can see the problem online?

you can leave the one in responsive.css in the meantime
I placed the line in perso.css; and left the one I added in responsive.css as well.
User avatar
bennybernaer
Registered User
Posts: 674
Joined: Tue Mar 22, 2011 9:53 pm
Top

Re: Quick links (responsive code not loading in perso.css)

by Mazeltof » Mon Jul 01, 2024 8:55 pm

from what I can see as a visitor on your site everything seems ok
the perso.css file rule is taken into account when reducing a window

in fact, you should be able to undo the change in responsive.css
User avatar
Mazeltof
Registered User
Posts: 103
Joined: Wed Sep 28, 2016 5:18 pm
Location: Arras - France
Top

Re: Quick links (responsive code not loading in perso.css)

by bennybernaer » Tue Jul 02, 2024 8:02 am

Hmmm very strange. I have now cleared the browser history and cache.
But it still doesn't load in perso.css

The strange thing is that all the other responsive code is loaded in perso.css


Image

Image
User avatar
bennybernaer
Registered User
Posts: 674
Joined: Tue Mar 22, 2011 9:53 pm
Top

Re: Quick links (responsive code not loading in perso.css)

by Mazeltof » Tue Jul 02, 2024 5:22 pm

I don't understand how this is possible, you can see on the attached preview that the perso.css rule overrides the responsive.css rule.
Sans titre.jpg
aren't we talking about the site linked in your contacts?
are you testing on another similar site (dev or local)?
User avatar
Mazeltof
Registered User
Posts: 103
Joined: Wed Sep 28, 2016 5:18 pm
Location: Arras - France
Top

Re: Quick links (responsive code not loading in perso.css)

by bennybernaer » Tue Jul 02, 2024 7:18 pm

Yes, it's about the site in my signature. I also have a copy of this style on another (test) domain, but I experience the same problem there.
User avatar
bennybernaer
Registered User
Posts: 674
Joined: Tue Mar 22, 2011 9:53 pm
Top

Re: Quick links (responsive code not loading in perso.css)

by bennybernaer » Mon Jul 08, 2024 7:59 am

I still haven't figured it out... What I did find.

If you adjust the following in responsive.css, it will be loaded in perso.css

original in responsive.css

Code: Select all

@media (max-width: 500px) {
	.quick-links .dropdown-trigger span {
		display: none;
	}
}
with change to responsive.css

Code: Select all

@media (max-width: 500px) {
	.quick-links .dropdown-trigger span. {
		display: none;
	}
}
If you have a . place after span the code below is loaded is perso.css without that . The code below is only loaded in responsive.css

Code: Select all

@media (max-width: 500px) {
	.quick-links .dropdown-trigger span.quick-text {
		display: none;
	}
}
User avatar
bennybernaer
Registered User
Posts: 674
Joined: Tue Mar 22, 2011 9:53 pm
Top

Re: Quick links (responsive code not loading in perso.css)

by bennybernaer » Thu Jul 25, 2024 4:34 pm

Anyone have any idea how this happens?
User avatar
bennybernaer
Registered User
Posts: 674
Joined: Tue Mar 22, 2011 9:53 pm
Top

Re: Quick links (responsive code not loading in perso.css)

by cabot » Fri Jul 26, 2024 9:24 am

Hello,

Undo your changes and add this to perso.css:

Code: Select all

.quick-links .dropdown-trigger span.quick-icon,
.quick-links .dropdown-trigger span.quick-icon span {
	display: inline-block;
}
What's more, you don't need to add a quick-text class to navbar_header_top.html:

Code: Select all

<span class="quick-text">{L_QUICK_LINKS}</span>
=>

Code: Select all

<span>{L_QUICK_LINKS}</span>
User avatar
cabot
Registered User
Posts: 770
Joined: Sat Jan 07, 2012 4:16 pm
Top

Re: Quick links (responsive code not loading in perso.css)

by bennybernaer » Fri Jul 26, 2024 3:21 pm

Thank you! This helped. I would never have found that out myself.
User avatar
bennybernaer
Registered User
Posts: 674
Joined: Tue Mar 22, 2011 9:53 pm
Top