Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
Apq
/
violentmonkey
spogulis no https://github.com/violentmonkey/violentmonkey.git
1
0
Atdalīts 0
Faili Problēmas 0 Vikivietne
Pārlūkot izejas kodu

fix: adapt to small devices

close #432
Gerald 7 gadi atpakaļ
vecāks
9893f03db9
revīzija
1db6545bf2
11 mainītis faili ar 192 papildinājumiem un 89 dzēšanām
Dalītais skats Rādīt salīdzināšanas statistiku
  1. 3 2
      scripts/vue-loader.conf.js
  2. 1 1
      scripts/webpack.conf.js
  3. 27 0
      src/common/ui/style/style.css
  4. 1 0
      src/confirm/index.html
  5. 23 25
      src/confirm/views/app.vue
  6. 1 0
      src/options/index.html
  7. 44 3
      src/options/style.css
  8. 21 9
      src/options/views/app.vue
  9. 17 5
      src/options/views/edit/index.vue
  10. 53 43
      src/options/views/script-item.vue
  11. 1 1
      src/options/views/tab-installed.vue

+ 3 - 2
scripts/vue-loader.conf.js
Parādīt failu 

@@ -1,6 +1,7 @@
 
 const { isProd } = require('./utils');
 
 
 module.exports = {
 
-  extractCSS: isProd,
 
-  preserveWhitespace: false,
 
+  compilerOptions: {
 
+    preserveWhitespace: false,
 
+  },
 
 };

+ 1 - 1
scripts/webpack.conf.js
Parādīt failu 

@@ -42,7 +42,7 @@ targets.push(merge(base, {
 
     }),
 
     new HtmlWebpackPlugin({
 
       filename: 'confirm/index.html',
 
-      template: 'src/public/index.html',
 
+      template: 'src/confirm/index.html',
 
       chunks: ['browser', 'common', 'confirm/app'],
 
     }),
 
     new HtmlWebpackPlugin({

+ 27 - 0
src/common/ui/style/style.css
Parādīt failu 

@@ -108,6 +108,9 @@ button {
 
 .flex-col {
 
   flex-direction: column;
 
 }
 
+.flex-wrap {
 
+  flex-wrap: wrap;
 
+}
 
 .flex-auto {
 
   flex: auto;
 
   .flex-col > & {
 
@@ -132,6 +135,9 @@ button {
 
 .ml-2 {
 
   margin-left: 1em;
 
 }
 
+.mr-2 {
 
+  margin-right: 1em;
 
+}
 
 .mt-1 {
 
   margin-top: .5em;
 
 }
 
@@ -169,6 +175,9 @@ button {
 
   text-overflow: ellipsis;
 
   overflow: hidden;
 
 }
 
+.text-right {
 
+  text-align: right;
 
+}
 
 
 .frame {
 
   background: #f0f0f0;
 
@@ -194,3 +203,21 @@ button {
 
   padding: 1rem;
 
   background: white;
 
 }
 
+
 
+@media (min-width: 768px) {
 
+  .visible-sm {
 
+    display: none;
 
+  }
 
+}
 
+
 
+@media (max-width: 767px) {
 
+  .hidden-sm {
 
+    display: none !important;
 
+  }
 
+}
 
+
 
+@media (max-width: 319px) {
 
+  .hidden-xs {
 
+    display: none !important;
 
+  }
 
+}

+ 1 - 0
src/public/index.html → src/confirm/index.html
Parādīt failu 

@@ -2,6 +2,7 @@
 
 <html>
 
 <head>
 
 <meta charset="utf-8">
 
+<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 
 <title></title>
 
 <link rel="icon" type="image/png" href="/public/images/icon32.png" sizes="32x32">
 
 <link rel="icon" type="image/png" href="/public/images/icon16.png" sizes="16x16">

+ 23 - 25
src/confirm/views/app.vue
Parādīt failu 

@@ -1,25 +1,30 @@
 
 <template>
 
   <div class="page-confirm frame flex flex-col h-100">
 
     <div class="frame-block">
 
-      <div class="buttons pull-right">
 
-        <dropdown class="confirm-options" align="right">
 
-          <button slot="toggle" v-text="i18n('buttonInstallOptions')"></button>
 
-          <label>
 
-            <setting-check name="closeAfterInstall" @change="checkClose" />
 
-            <span v-text="i18n('installOptionClose')"></span>
 
-          </label>
 
-          <label>
 
-            <setting-check name="trackLocalFile" :disabled="closeAfterInstall" />
 
-            <span v-text="i18n('installOptionTrack')"></span>
 
-          </label>
 
-        </dropdown>
 
-        <button v-text="i18n('buttonConfirmInstallation')"
 
-        :disabled="!installable" @click="installScript"></button>
 
-        <button v-text="i18n('buttonClose')" @click="close"></button>
 
+      <div class="flex">
 
+        <h1 class="hidden-sm"><span v-text="i18n('labelInstall')"></span> - <span v-text="i18n('extName')"></span></h1>
 
+        <div class="flex-auto"></div>
 
+        <div>
 
+          <dropdown class="confirm-options" align="right">
 
+            <button slot="toggle" v-text="i18n('buttonInstallOptions')"></button>
 
+            <label>
 
+              <setting-check name="closeAfterInstall" @change="checkClose" />
 
+              <span class="ml-1" v-text="i18n('installOptionClose')"></span>
 
+            </label>
 
+            <label>
 
+              <setting-check name="trackLocalFile" :disabled="closeAfterInstall" />
 
+              <span class="ml-1" v-text="i18n('installOptionTrack')"></span>
 
+            </label>
 
+          </dropdown>
 
+          <button v-text="i18n('buttonConfirmInstallation')"
 
+          :disabled="!installable" @click="installScript"></button>
 
+          <button v-text="i18n('buttonClose')" @click="close"></button>
 
+        </div>
 
+      </div>
 
+      <div class="flex">
 
+        <div class="ellipsis flex-auto mr-2" :title="info.url" v-text="info.url"></div>
 
+        <div v-text="message"></div>
 
       </div>
 
-      <h1><span v-text="i18n('labelInstall')"></span> - <span v-text="i18n('extName')"></span></h1>
 
-      <div class="ellipsis confirm-url" :title="info.url" v-text="info.url"></div>
 
-      <div class="ellipsis confirm-msg" v-text="message"></div>
 
     </div>
 
     <div class="frame-block flex-auto pos-rel">
 
       <vm-code class="abs-full" readonly :value="code" :commands="commands" />
 
@@ -245,11 +250,4 @@ export default {
 
     width: 13rem;
 
   }
 
 }
 
-.confirm-url {
 
-  float: left;
 
-  max-width: 50%;
 
-}
 
-.confirm-msg {
 
-  text-align: right;
 
-}
 
 </style>

+ 1 - 0
src/options/index.html
Parādīt failu 

@@ -2,6 +2,7 @@
 
 <html>
 
 <head>
 
 <meta charset="utf-8">
 
+<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 
 <title></title>
 
 <link rel="icon" type="image/png" href="/public/images/icon32.png" sizes="32x32">
 
 <link rel="icon" type="image/png" href="/public/images/icon16.png" sizes="16x16">

+ 44 - 3
src/options/style.css
Parādīt failu 

@@ -3,15 +3,21 @@ body {
 
   height: 100%;
 
 }
 
 aside {
 
-  flex: 0 0 14rem;
 
+  position: relative;
 
+  z-index: 1000;
 
+}
 
+.aside-content {
 
+  width: 14rem;
 
+  height: 100%;
 
   padding: 4rem 1rem 0;
 
   text-align: right;
 
+  border-right: 1px solid darkgray;
 
   background: #fafafa;
 
   img {
 
     width: 5rem;
 
   }
 
 }
 
-.sidemenu {
 
+.aside-menu {
 
   border-top: 1px solid #bbb;
 
   > a {
 
     display: block;
 
@@ -27,6 +33,29 @@ aside {
 
     }
 
   }
 
 }
 
+.aside-toggle {
 
+  position: absolute;
 
+  width: 1rem;
 
+  height: 2rem;
 
+  top: 50%;
 
+  left: 100%;
 
+  margin-top: -1rem;
 
+  line-height: 2rem;
 
+  background: #fafafa;
 
+  color: darkgray;
 
+  border: 1px solid currentColor;
 
+  border-left: 0;
 
+  border-radius: 0 1rem 1rem 0;
 
+  > .icon {
 
+    display: block;
 
+    margin-top: .4rem;
 
+    margin-left: -.1rem;
 
+  }
 
+  .show-aside & > .icon {
 
+    transform: rotateY(180deg);
 
+  }
 
+}
 
+
 
 .text-red {
 
   color: red;
 
 }
 
@@ -62,7 +91,6 @@ section {
 
   position: relative;
 
   padding: 1.2rem;
 
   background: white;
 
-  border-left: 1px solid darkgray;
 
 }
 
 
 input[type=checkbox] {
 
@@ -92,3 +120,16 @@ input[type=checkbox] {
 
     }
 
   }
 
 }
 
+
 
+@media (max-width: 767px) {
 
+  .aside-content {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    transform: translateX(-100%);
 
+    transition: transform .2s;
 
+    .show-aside > & {
 
+      transform: none;
 
+    }
 
+  }
 
+}

+ 21 - 9
src/options/views/app.vue
Parādīt failu 

@@ -1,12 +1,17 @@
 
 <template>
 
   <div class="page-options flex h-100">
 
-    <aside>
 
-      <img src="/public/images/icon128.png">
 
-      <h1 v-text="i18n('extName')"></h1>
 
-      <div class="sidemenu">
 
-        <a href="#scripts" :class="{active: tab === 'scripts'}" v-text="i18n('sideMenuInstalled')"></a>
 
-        <a href="#settings" :class="{active: tab === 'settings'}" v-text="i18n('sideMenuSettings')"></a>
 
-        <a href="#about" :class="{active: tab === 'about'}" v-text="i18n('sideMenuAbout')"></a>
 
+    <aside :class="{ 'show-aside': aside }">
 
+      <div class="aside-content">
 
+        <img src="/public/images/icon128.png">
 
+        <h1 v-text="i18n('extName')"></h1>
 
+        <div class="aside-menu">
 
+          <a href="#scripts" :class="{active: tab === 'scripts'}" v-text="i18n('sideMenuInstalled')"></a>
 
+          <a href="#settings" :class="{active: tab === 'settings'}" v-text="i18n('sideMenuSettings')"></a>
 
+          <a href="#about" :class="{active: tab === 'about'}" v-text="i18n('sideMenuAbout')"></a>
 
+        </div>
 
+        <div class="aside-toggle visible-sm" @click="aside = !aside">
 
+          <icon name="arrow" />
 
+        </div>
 
       </div>
 
     </aside>
 
     <component :is="tabComponent" class="tab flex-auto"></component>
 
@@ -14,6 +19,7 @@
 
 </template>
 
 
 <script>
 
+import Icon from '#/common/ui/icon';
 
 import { store } from '../utils';
 
 import Installed from './tab-installed';
 
 import Settings from './tab-settings';
 
@@ -26,12 +32,18 @@ const tabs = {
 
 };
 
 
 export default {
 
+  components: {
 
+    Icon,
 
+  },
 
   data() {
 
-    return store;
 
+    return {
 
+      aside: false,
 
+      store,
 
+    };
 
   },
 
   computed: {
 
     tab() {
 
-      let tab = this.route.paths[0];
 
+      let tab = this.store.route.paths[0];
 
       if (!tabs[tab]) tab = 'scripts';
 
       return tab;
 
     },

+ 17 - 5
src/options/views/edit/index.vue
Parādīt failu 

@@ -1,16 +1,18 @@
 
 <template>
 
-  <div class="frame flex flex-col fixed-full">
 
+  <div class="edit frame flex flex-col fixed-full">
 
     <div class="flex edit-header">
 
-      <h2 v-text="i18n('labelScriptEditor')"></h2>
 
-      <div class="flex-auto pos-rel ml-2">
 
+      <h2 class="mr-2" v-text="i18n('labelScriptEditor')"></h2>
 
+      <div class="pos-rel">
 
         <div class="edit-nav">
 
           <div class="edit-nav-item" v-text="i18n('editNavCode')" :class="{active: nav === 'code'}" @click="nav = 'code'"></div>
 
           <div class="edit-nav-item" v-text="i18n('editNavSettings')" :class="{active: nav === 'settings'}" @click="nav = 'settings'"></div>
 
           <div class="edit-nav-item" v-text="i18n('editNavValues')" :class="{active: nav === 'values'}" @click="nav = 'values'"></div>
 
         </div>
 
       </div>
 
-      <div class="text-right">
 
-        <a class="mr-1" href="https://violentmonkey.github.io/2017/03/14/How-to-edit-scripts-with-your-favorite-editor/" target="_blank">How to edit with your favorite editor?</a>
 
+      <div class="flex-auto text-right ellipsis mr-1">
 
+        <a href="https://violentmonkey.github.io/2017/03/14/How-to-edit-scripts-with-your-favorite-editor/" target="_blank">How to edit with your favorite editor?</a>
 
+      </div>
 
+      <div>
 
         <button v-text="i18n('buttonSave')" @click="save" :disabled="!canSave"></button>
 
         <button v-text="i18n('buttonSaveClose')" @click="saveClose" :disabled="!canSave"></button>
 
         <button v-text="i18n('buttonClose')" @click="close"></button>
 
@@ -209,6 +211,7 @@ export default {
 
 
 <style>
 
 .edit {
 
+  z-index: 2000;
 
   &-header {
 
     > * {
 
       padding: 8px;
 
@@ -223,6 +226,7 @@ export default {
 
     position: absolute;
 
     left: 0;
 
     bottom: 0;
 
+    white-space: nowrap;
 
     .text-red {
 
       margin-left: 8px;
 
     }
 
@@ -242,4 +246,12 @@ export default {
 
     }
 
   }
 
 }
 
+
 
+@media (max-width: 767px) {
 
+  .edit-header > h2,
 
+  .edit-header > .flex-auto,
 
+  .edit-nav {
 
+    display: none;
 
+  }
 
+}
 
 </style>

+ 53 - 43
src/options/views/script-item.vue
Parādīt failu 

@@ -1,15 +1,14 @@
 
 <template>
 
   <div class="script" :class="{ disabled: !script.config.enabled, removed: script.config.removed }" :draggable="draggable" @dragstart.prevent="onDragStart">
 
-    <img class="script-icon" :src="safeIcon">
 
+    <img class="script-icon hidden-xs" :src="safeIcon">
 
     <div class="script-info flex">
 
-      <div class="script-name ellipsis" v-text="script._cache.name"></div>
 
-      <div class="flex-auto"></div>
 
-      <tooltip :title="i18n('labelAuthor') + script.meta.author" class="script-author ml-1" v-if="author" align="end">
 
+      <div class="script-name ellipsis flex-auto" v-text="script._cache.name"></div>
 
+      <tooltip :title="i18n('labelAuthor') + script.meta.author" class="script-author ml-1 hidden-sm" v-if="author" align="end">
 
         <icon name="author"></icon>
 
         <a class="ellipsis ml-1" :href="`mailto:${author.email}`" v-if="author.email" v-text="author.name"></a>
 
         <span class="ellipsis ml-1" v-else v-text="author.name"></span>
 
       </tooltip>
 
-      <tooltip :title="lastUpdated.title" class="ml-1" align="end">
 
+      <tooltip class="ml-1 hidden-sm" :title="lastUpdated.title" align="end">
 
         <span v-text="script.meta.version ? `v${script.meta.version}` : ''"></span>
 
         <span class="secondary ml-1" v-text="lastUpdated.show"></span>
 
       </tooltip>
 
@@ -23,38 +22,40 @@
 
       </div>
 
     </div>
 
     <div class="script-buttons flex">
 
-      <tooltip :title="i18n('buttonEdit')" align="start">
 
-        <span class="btn-ghost" @click="onEdit">
 
-          <icon name="code"></icon>
 
-        </span>
 
-      </tooltip>
 
-      <tooltip :title="labelEnable" align="start">
 
-        <span class="btn-ghost" @click="onEnable">
 
-          <icon :name="`toggle-${script.config.enabled ? 'on' : 'off'}`"></icon>
 
-        </span>
 
-      </tooltip>
 
-      <tooltip :disabled="!canUpdate || script.checking" :title="i18n('buttonUpdate')" align="start">
 
-        <span class="btn-ghost" @click="onUpdate">
 
-          <icon name="refresh"></icon>
 
-        </span>
 
-      </tooltip>
 
-      <span class="sep"></span>
 
-      <tooltip :disabled="!homepageURL" :title="i18n('buttonHome')" align="start">
 
-        <a class="btn-ghost" target="_blank" :href="homepageURL">
 
-          <icon name="home"></icon>
 
-        </a>
 
-      </tooltip>
 
-      <tooltip :disabled="!description" :title="description" align="start">
 
-        <span class="btn-ghost">
 
-          <icon name="info"></icon>
 
-        </span>
 
-      </tooltip>
 
-      <tooltip :disabled="!script.meta.supportURL" :title="i18n('buttonSupport')" align="start">
 
-        <a class="btn-ghost" target="_blank" :href="script.meta.supportURL">
 
-          <icon name="question"></icon>
 
-        </a>
 
-      </tooltip>
 
-      <div class="flex-auto" v-text="script.message"></div>
 
+      <div class="flex-auto flex flex-wrap">
 
+        <tooltip :title="i18n('buttonEdit')" align="start">
 
+          <span class="btn-ghost" @click="onEdit">
 
+            <icon name="code"></icon>
 
+          </span>
 
+        </tooltip>
 
+        <tooltip :title="labelEnable" align="start">
 
+          <span class="btn-ghost" @click="onEnable">
 
+            <icon :name="`toggle-${script.config.enabled ? 'on' : 'off'}`"></icon>
 
+          </span>
 
+        </tooltip>
 
+        <tooltip :disabled="!canUpdate || script.checking" :title="i18n('buttonUpdate')" align="start">
 
+          <span class="btn-ghost" @click="onUpdate">
 
+            <icon name="refresh"></icon>
 
+          </span>
 
+        </tooltip>
 
+        <span class="sep"></span>
 
+        <tooltip :disabled="!homepageURL" :title="i18n('buttonHome')" align="start">
 
+          <a class="btn-ghost" target="_blank" :href="homepageURL">
 
+            <icon name="home"></icon>
 
+          </a>
 
+        </tooltip>
 
+        <tooltip :disabled="!description" :title="description" align="start">
 
+          <span class="btn-ghost">
 
+            <icon name="info"></icon>
 
+          </span>
 
+        </tooltip>
 
+        <tooltip :disabled="!script.meta.supportURL" :title="i18n('buttonSupport')" align="start">
 
+          <a class="btn-ghost" target="_blank" :href="script.meta.supportURL">
 
+            <icon name="question"></icon>
 
+          </a>
 
+        </tooltip>
 
+        <div class="script-message" v-text="script.message"></div>
 
+      </div>
 
       <tooltip :title="i18n('buttonRemove')" align="end">
 
         <span class="btn-ghost" @click="onRemove(1)">
 
           <icon name="trash"></icon>
 
@@ -367,17 +368,15 @@ export default {
 
     }
 
   }
 
   &-buttons {
 
-    margin-left: 3.5rem;
 
-    align-items: center;
 
     line-height: 1;
 
     color: #3e4651;
 
-    > .flex-auto {
 
-      margin-left: 1rem;
 
+    > .flex {
 
+      align-items: center;
 
     }
 
     .removed & {
 
       display: none;
 
     }
 
-    > .disabled {
 
+    .disabled {
 
       color: gainsboro;
 
     }
 
     .icon {
 
@@ -385,7 +384,6 @@ export default {
 
     }
 
   }
 
   &-info {
 
-    margin-left: 3.5rem;
 
     line-height: 1.5;
 
     align-items: center;
 
   }
 
@@ -402,6 +400,9 @@ export default {
 
       width: 2rem;
 
       height: 2rem;
 
     }
 
+    ~ * {
 
+      margin-left: 3.5rem;
 
+    }
 
   }
 
   &-name {
 
     font-weight: 500;
 
@@ -419,6 +420,9 @@ export default {
 
       max-width: 100px;
 
     }
 
   }
 
+  &-message {
 
+    white-space: nowrap;
 
+  }
 
 }
 
 .dragging {
 
   position: fixed;
 
@@ -428,4 +432,10 @@ export default {
 
     visibility: hidden;
 
   }
 
 }
 
+
 
+@media (max-width: 319px) {
 
+  .script-icon ~ * {
 
+    margin-left: 0;
 
+  }
 
+}
 
 </style>

+ 1 - 1
src/options/views/tab-installed.vue
Parādīt failu 

@@ -43,7 +43,7 @@
 
           </label>
 
         </div>
 
       </dropdown>
 
-      <div class="filter-search">
 
+      <div class="filter-search hidden-sm">
 
         <input type="text" :placeholder="i18n('labelSearchScript')" v-model="search">
 
         <icon name="search"></icon>
 
       </div>