Improved style for userlink block

[saymoncoppi]

Hello @fabiocaccamo since I was trying to improve the appearance of userlink block I realized that we could also adjust the CSS of language-selector for a better experience on different media sizes. Related issue: 246

I made these changes to keep elements together no matter the media size.

Using Notebook (1900x1400):

Simulating an iPhone:

It is not finished bc the goal was just to share a contribution to the project. Check the results and take a look at CSS styles I made.
Course a CSS expert could be better than this, but was enough to get the benefits of the UI improvements.
Let me know if I can help with something...

My files, pls don't judge lol

.../templates/admin/base_site.html

{% extends "admin/base_site.html" %}
{% load i18n %}
{% load static %}
{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/extra_base_site.css' %}"    />
{%endblock%}

...static;css/extra_base_site.css

#logout-form button {
  color: #747474;
}

#logout-form button:hover {
  color: #333333;
}

.admin-interface .language-chooser {
  display: inline-block;
  position: unset !important;
}

.language-chooser-select-form select {
  /* display: block; */
  width: 65px;
  margin-top: -9px;
  margin-left: -15px;
  font-size: 11px;
  font-weight: 300;
  outline: none;
  border: 0px;
  border-style: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  color: #747474;
}

.language-chooser-select-form::before {
  content: '/';
  font-size: 11px;
  font-weight: 300;
  left: -17px;
  color: #747474;
  display: inline-block;
  position: absolute;
}

.language-chooser-select-form::after {
  content: '';
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #ccc;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  right: -10px;
  bottom: 10px;
}


.language-chooser-select-form select:hover {
  color: #333333;
}

@media (max-width: 768px),
(max-width: 1024px) {
  .language-chooser-select-form select {
    margin-top: 0px !important;
    margin-left: 0px !important;
  }

  .language-chooser-select-form::before {
    left: -1px !important;
    top: 5px !important;
  }
}

.language-chooser-select-form select option {
  margin-top: 30px !important;
  display: inline-block !important;
}

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[fabiocaccamo]

Hi @saymoncoppi
I don't understand what this style does, could you share two screenshots before/after please?

[saymoncoppi]

Using the current CSS version

before:

2023-09-04.08.29.10.mp4

after:

2023-09-04.08.34.27.mp4

What I did?

I switched the position attribute to "unset".
So the element could follow the others and keep UI doesn't matter the resolution or window size.

.admin-interface .language-chooser {
  display: inline-block;
  position: unset !important;
}

Check the behavior when I switched from the original CSS to mine:

2023-09-04.08.43.59.mp4

Let me know if you realize the difference.
See you!

[fabiocaccamo]

@saymoncoppi I'm sorry, I didn't understand before, now I got the point.

Thank you for the CSS, I will adjust it a bit and add an checkbox option for using it or not.

[fabiocaccamo]

@saymoncoppi testing the language control appearance on Firefox / Chrome / Safari on MacOS, here how I see the supported controls:

default select control

minimal select control

[saymoncoppi]

Awesome!!! Em qua., 1 de nov. de 2023 às 08:25, Fabio Caccamo ***@***.***> escreveu:

…

@saymoncoppi <https://github.com/saymoncoppi> testing the language control appearance on Firefox / Chrome / Safari on MacOS, here how I see the supported controls: default select control [image: Screenshot 2023-11-01 at 12 22 32] <https://user-images.githubusercontent.com/1035294/279659500-6edb9c13-efb0-4715-9ef8-0912c381e63f.png> minimal select control [image: Screenshot 2023-11-01 at 12 23 21] <https://user-images.githubusercontent.com/1035294/279659655-24207c2c-375a-4a1e-b77e-82f5a3734a7d.png> — Reply to this email directly, view it on GitHub <#314 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFIJVQ7WON2LDGU3IDPXBKLYCIWSJAVCNFSM6AAAAAA4GYK6GKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBYG44TONZZGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>