Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right padding on the main UI add-on store buttons #2456

Closed
ghys opened this issue Mar 5, 2024 · 5 comments · Fixed by #2500
Closed

Right padding on the main UI add-on store buttons #2456

ghys opened this issue Mar 5, 2024 · 5 comments · Fixed by #2500
Labels
bug Something isn't working main ui Main UI

Comments

@ghys
Copy link
Member

ghys commented Mar 5, 2024

The problem

Seems like the buttons have lost their right padding on narrow screens in the add-on store:

image

Expected behavior

Buttons with the right padding, like on wider screens:

Steps to reproduce

image

Your environment

runtimeInfo:
  version: 4.2.0
  buildString: "Build #3972"
locale: en-US
systemInfo:
  configFolder: /root/oh4/conf
  userdataFolder: /root/oh4/userdata
  logFolder: /root/oh4/userdata/logs
  javaVersion: 17.0.6
  javaVendor: Azul Systems, Inc.
  javaVendorVersion: Zulu17.40+19-CA
  osName: Linux
  osVersion: 5.10.103-v7+
  osArchitecture: arm
  availableProcessors: 4
  freeMemory: 43826512
  totalMemory: 233177088
  uptime: 15251
  startLevel: 100
addons: []
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: false
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: true
    webview: true
    standalone: true
    pixelRatio: 1
    prefersColorScheme: light
  isSecureContext: false
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: N/A
    hardwareConcurrency: 8
    language: en-US
    languages:
      - en-US
      - en
      - fr
    onLine: true
    platform: Linux x86_64
  screen:
    width: 1920
    height: 1080
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: light
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
    blocklyRenderer: null
  userAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like
    Gecko) Chrome/110.0.0.0 Safari/537.36
timestamp: 2024-03-05T20:11:58.648Z

Browser console

Browser network traffic

Additional information

@ghys ghys added bug Something isn't working main ui Main UI labels Mar 5, 2024
@florian-h05
Copy link
Contributor

Can you please help me to reproduce that issue? I can neither reproduce it on my real phone nor with the browsers dev tool device simulator.

@ghys
Copy link
Member Author

ghys commented Mar 20, 2024

I have identified the problem, it seems to be this piece of CSS:

.button {
    padding-left: 5px;
    padding-right: 0
}

Apparently it's been added to components/pagedesigner/sitemap/attribute-details.vue in #2193:
https://github.com/openhab/openhab-webui/pull/2193/files#diff-9c486fe8694b36e1157920d405a6693f85c0d7bd12162a36780e4feeb970e05c

<style lang="stylus">
.button
  padding-left 5px
  padding-right 0px
.input
  width inherit
</style>

When you don't add the "scoped" attribute to the style node in Vue 2, and redefine these global classes, they effectively have a global impact.
I don't trust the "scoped" attribute too much so when designing components I made sure I added some parent class to scope these kinds of change to this particular component.

cc @mherwege

@florian-h05
Copy link
Contributor

TBH I am wondering for what this styling is actually needed ... I can't see a problem without it.

@mherwege
Copy link
Contributor

The reason is on this line: https://github.com/mherwege/openhab-webui/blob/a5ff0ef7481d2b5441528791aaca295f1899b3cb/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/attribute-details.vue#L16

Without the styling, the clear button moves too much to the left, leaving lost space on the right of it. It matters, especially on small screens when the attributes are shown on the bottom of the page.
I am not good at CSS styling at all. So I would appreciate some help to solve that styling issue.

florian-h05 added a commit to florian-h05/openhab-webui that referenced this issue Mar 24, 2024
Fixes openhab#2456.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
@florian-h05
Copy link
Contributor

Thanks for the hint, I have created a fix for this issue, that retains your styling, see #2500.

florian-h05 added a commit that referenced this issue Mar 24, 2024
Fixes #2456.

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working main ui Main UI
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants