search

ebullient / obsidian-theme-ebullientworks

Theme for Obsidian.md (https://obsidian.md)
Creative Commons Zero v1.0 Universal
89 stars 7 forks source link

Fix properties crashing on vertical mobile views #99

Open sigrunixia opened 2 weeks ago

sigrunixia commented 2 weeks ago

IMG_3041

As seen here. Iphone 11 pro max sized screen.

sigrunixia commented 2 weeks ago

Will remove the properties title up top on mobile

sigrunixia commented 1 week ago

Okay, so simple hiding is not.. optimal.

Option A

CleanShot 2024-06-27 at 21 40 25

@media screen and (max-width: 700px) {

  .metadata-properties-title {
    margin-bottom: var(--size-4-1);
    padding: var(--size-2-3);
    display: flex;
    justify-content: left;
    font-family: var(--ebw-header-font);
    background-color: rgba(var(--secondary-accent-4-rgb), 0.1);

    &:before {
      display: none;
    }
    &::after {
      display: none;
    }
  }

  .markdown-source-view .metadata-container .metadata-add-button {
    margin-top: revert;
    padding-left: revert;
    position: revert;
    font-size: revert;
    left: revert;
    top: revert;
  }
}
sigrunixia commented 1 week ago

Option B

CleanShot 2024-06-27 at 21 42 25

@media screen and (max-width: 700px) {

  .metadata-properties-title {
    display: none;
  }

  .markdown-source-view .metadata-container .metadata-add-button {
    margin-top: revert;
    padding-left: revert;
    position: revert;
    font-size: revert;
    left: revert;
    top: revert;
  }
}
sigrunixia commented 1 week ago

I'm leaning towards B because on mobile, if properties are used:

  1. You know its a property.
  2. Real Screen estate is precious