Merge pull request #153 from sGerli/master

Fix overflow issues
pebble-dev · Aug 4, 2019 · 079d18d · 079d18d
2 parents 81d7757 + 57aa80c
commit 079d18d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -101,9 +101,9 @@ export default {
  top: 2px;
 
  // Make text smaller on small screens
- @media screen and (max-width: 370px) {
- margin-left: -10px;
- top: 9px;
+ @media screen and (max-width: 430px) {
+  margin-left: -10px;
+ top: 2px;
  font-size: 1rem;
  }
  }

diff --git a/src/components/pages/widgets/AppTitleBar.vue b/src/components/pages/widgets/AppTitleBar.vue
@@ -20,8 +20,9 @@
  </div>
  </div>
  <div class="card subsection-extra card-inverse text-left p-2" v-if=" app.companions != undefined && (app.companions.ios != null || app.companions.android != null) && app.type != 'watchface'">
- <h2>Requires Companion</h2>
- <div class="pull-right">
+ <h2 v-if="app.type === 'companion-app'">Requires Companion</h2>
+ <h2 v-if="app.type !== 'companion-app'">Companion</h2>
+ <div class="ml-auto">
  <a v-if="app.companions.ios" v-bind:href="app.companions.ios.url" target="_blank">
  <svg class="app-icon" width="22px" height="22px">
  <use xlink:href="#iconApple"></use>
@@ -133,12 +134,14 @@ export default {
 // Title bar displayed below app banner
 
 .app-title-bar {
+ display: flex !important;
+ flex-direction: row;
+
  img {
- position: absolute;
  border-radius: 4px;
  width: 42px;
  height: 42px;
- left: 16px;
+ margin-right: 5px;
  }
  // Author name and app title text container
  .title-author {
@@ -150,10 +153,11 @@ export default {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
- @media screen and (max-width: 430px) {
+ /*@media screen and (max-width: 430px) {
  width: calc(100% - 160px);
- }
- width: calc(100% - 220px);
+ }*/
+ //width: calc(100% - 220px);
+ width: 100%;
 
  h1 {
  font-size: 19px;
@@ -190,15 +194,24 @@ export default {
 
  // Set styles of buttons in the app-button-container (app-details and app-versions page)
  .app-button-container {
+ margin-left: auto;
+ padding-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
+ min-width: 196px;
+ @media screen and (max-width: 430px) {
+ min-width: 146px;
+ }
  .btn {
  @media screen and (max-width: 430px) {
  // styles for when screen smaller than 430px to avoid breaking all styles (they make things smaller)
  margin-top: 3px;
  font-size: 0.7rem;
  padding: .5rem .5rem;
  }
+ &.btn-download {
+ margin-left: 2px;
+ }
 
  // Set thumbs up button styles
  &.btn-thumbs-up {
@@ -230,6 +243,8 @@ export default {
 .card.subsection-extra {
  padding-left: 30px !important;
  padding-right: 30px !important;
+ display: flex;
+ flex-direction: row;
  h2 {
  font-size: 16px;
  line-height: 26px;