Merge pull request #47 from source-data/EEB41/mobile-view

EEB 41: Mobile view

frontend/src/App.vue

@@ -59,6 +59,10 @@ html, body {
 .container.main-content {
   max-width: 100%;
   width: 100%;
+
+  @media only screen and (max-width: 1280px) {
+    padding: 10px !important;
+  }
 }
 
 .v-input__control:has(input:disabled) {

frontend/src/components/filtering/by-simple-search-query.vue

@@ -9,7 +9,7 @@ v-card(flat).flex-grow-1
       hide-details
       outlined
     ).mt-0.pt-0
-    v-tooltip(bottom transition="fade-transition")
+    v-tooltip(color="tooltip" bottom transition="fade-transition")
       template(v-slot:activator="{ on, hover, attrs }")
         v-btn(text v-bind="attrs" v-on="on" @click="currentQuery = ''" icon :disabled="query === ''")
           v-icon(dense) mdi-close-circle

frontend/src/components/highlights/article.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-container(fluid)
+  v-container(fluid).pa-0
     v-row(v-if="article")
       v-col.d-flex.align-center
         HighlightedListItem(:article="article" :expandedReview="expandedReview" :open-preprint-boxes=[0, 1, 2] :open-reviewed-boxes=[0, 1, 2]).ml-auto.mr-auto
@@ -165,3 +165,8 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+  ::v-deep .container {
+    padding: 0 !important;
+  }
+</style>

frontend/src/components/highlights/index.vue

@@ -21,24 +21,24 @@ div(style="max-width: 100%;").d-flex.mr-auto.ml-auto
       v-row(v-if="paging.totalItems > 0")
         v-col.d-flex
           v-btn-toggle(v-model="sortBy" mandatory)
-            v-tooltip(bottom transition="fade-transition")
+            v-tooltip(color="tooltip" bottom transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
                 v-btn(x-small v-bind="attrs" v-on="on" outlined value="preprint-date")
                   | preprint date
               span Sort by preprint date
-            v-tooltip(bottom transition="fade-transition")
+            v-tooltip(color="tooltip" bottom transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
                 v-btn(x-small outlined value="reviewing-date" v-bind="attrs" v-on="on")
                   | reviewing date
               span Sort by revewing date
 
           v-btn-toggle(v-model="sortedOrder" mandatory).ml-3
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
                 v-btn(x-small v-bind="attrs" v-on="on" icon aria-label="descending" value="desc")
                   v-icon(dense) mdi-sort-descending
               span Show latest first
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
                 v-btn(x-small v-bind="attrs" v-on="on" icon aria-label="ascending" value="asc")
                   v-icon(dense) mdi-sort-ascending

frontend/src/components/highlights/list-item.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-v-card(v-if="article" color="tertiary" style="max-width: 70%;")
+v-card(v-if="article" color="tertiary")
   v-card-title.pb-3
     span.d-flex.flex-row
       router-link(:to="generateInternalUrl").paper-title
@@ -13,11 +13,11 @@ v-card(v-if="article" color="tertiary" style="max-width: 70%;")
             v-list-item-title
               v-btn(@click="copyFullUrlToClipboard" elevation=0 plain depressed v-ripple="false")
                 v-icon(color="primary") mdi-link-variant
-                span.ml-2 Copy link to clipboard
+                span.ml-1 Copy link to clipboard
           v-list-item
             v-list-item-title
               v-btn(@click="copyCitationToClipboard" elevation=0 plain depressed v-ripple="false")
-                v-icon(color="primary") mdi-format-quote-open
+                v-icon(color="primary") mdi-content-copy
                 span.ml-2 Copy citation
           v-list-item
             v-list-item-title
@@ -40,9 +40,8 @@ v-card(v-if="article" color="tertiary" style="max-width: 70%;")
       a(:href="href(article.doi)" target="_blank" rel="noopener" class="ml-2")
         |
         | doi.org/{{ article.doi }}
-
   v-card-text
-    v-expansion-panels(accordion multiple v-model="openPreprintBoxes").mb-3.mt-1
+    v-expansion-panels(accordion multiple v-model="dataOpenPreprintBoxes").mb-3.mt-1
       v-expansion-panel(mandatory eager)
         v-expansion-panel-header(color="tertiary")
             span
@@ -55,18 +54,18 @@ v-card(v-if="article" color="tertiary" style="max-width: 70%;")
         v-expansion-panel-header(color="tertiary")
           span.d-flex.align-center
             h3 Preprint figure keywords
-            v-tooltip(bottom transition="fade-transition")
+            v-tooltip(color="tooltip" bottom transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-on:click.stop v-bind="attrs" v-on="on").ml-1
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-1
                   v-icon(color="grey-lighten-1") mdi-information-outline
               span <!-- TODO: Explain what these are and what the colors mean -->
                 h3 Keywords deduced from the figures. 
                 p(style="max-width: 250px;") Green text means this, orange text means that...
 
         v-expansion-panel-content(color="tertiary")
-          div.d-flex.flex-row.align-center
+          div.d-flex.align-center
             v-list-item.px-0
-              span.d-flex.flex-row.no-pointer-events
+              span.d-flex.flex-column.no-pointer-events
                 v-chip-group(v-if="article.main_topics.length > 0" :key="0" column)
                   v-chip(v-for="(item, index) in article.main_topics"  outlined :key="`topics-${index}`").purple--text {{ item.slice(0,3).join(", ") }}
                 v-chip-group(v-if="article.highlighted_entities.length > 0" :key="1" column)
@@ -76,7 +75,7 @@ v-card(v-if="article" color="tertiary" style="max-width: 70%;")
                 v-chip-group(v-if="article.assays.length > 0" :key="3" column)
                   v-chip(v-for="(item, index) in article.assays"  outlined :key="`assays-${index}`").green--text {{ item }}
 
-    v-expansion-panels(accordion multiple v-model="openReviewedBoxes")
+    v-expansion-panels(accordion multiple v-model="dataOpenReviewedBoxes")
       v-expansion-panel(readonly)
         v-expansion-panel-header(hide-actions)
           span.d-flex.flex-column
@@ -117,7 +116,6 @@ v-card(v-if="article" color="tertiary" style="max-width: 70%;")
                   :opportunity_for_author_response="reviewingService(selectedSource).opportunity_for_author_response",
                   :recommendation="reviewingService(selectedSource).recommendation",
                 ).px-0.mt-2
-
         v-expansion-panel-content(eager).pt-0
           span.review-process.d-flex.align-start.justify-start
             render-rev-timeline(:ref='article.doi + "-rev-timeline"')
@@ -127,9 +125,9 @@ v-card(v-if="article" color="tertiary" style="max-width: 70%;")
           span
             span.d-flex.align-center
               h3 Automated summary of preprint reviews
-              v-tooltip(bottom transition="fade-transition")
+              v-tooltip(color="tooltip" bottom transition="fade-transition")
                 template(v-slot:activator="{ on, hover, attrs }")
-                  span(v-on:click.stop v-bind="attrs" v-on="on").ml-1
+                  v-card(flat color="transparent" v-on:click.stop v-bind="attrs" v-on="on").ml-1
                     v-icon(color="grey-lighten-1") mdi-information-outline
                 p(style="max-width: 250px;")
                   | This summary was generated automatically using ChatGPT-4 based on the content of the reviews. 
@@ -142,12 +140,13 @@ v-card(v-if="article" color="tertiary" style="max-width: 70%;")
 
       v-expansion-panel
         v-expansion-panel-header 
-          h3 Cite this reviewed preprint
-            v-tooltip(bottom transition="fade-transition")
+          span.d-flex.align-baseline
+            h3 Cite reviewed preprint
+            v-tooltip(color="tooltip" bottom transition="fade-transition")
                 template(v-slot:activator="{ on, hover, attrs }")
-                  v-btn(@click="copyCitationToClipboard" v-on:click.stop v-bind="attrs" v-on="on" icon elevation=0 plain depressed v-ripple="false")
-                    v-icon(color="primary") mdi-format-quote-open
-                span Copy reviewed preprint citation
+                  v-card(@click="copyCitationToClipboard" v-on:click.stop v-bind="attrs" v-on="on" icon elevation=0 plain depressed v-ripple="false").pl-2
+                    v-icon(color="primary") mdi-content-copy
+                span Click to copy reviewed preprint citation
         v-expansion-panel-content
           span.d-flex.flex-row.align-top
             p(v-html="this.citationText(false)").mb-2.text-body-1
@@ -176,6 +175,9 @@ export default {
   },
   data() {
     return {
+      dataOpenPreprintBoxes: this.openPreprintBoxes,
+      dataOpenReviewedBoxes: this.openReviewedBoxes,
+
       dialog: false,
       selectedSource: null,
 
@@ -319,7 +321,14 @@ export default {
 }
 </script>
 
-<style scoped>
+
+<style lang="scss" scoped>
+  ::v-deep .v-expansion-panel-header__icon {
+    margin-bottom: auto !important;
+    padding-top: 0.5rem;
+    padding-left: 0.5rem;
+  }
+
   .v-card__text, .v-card__title { /* bug fix; see https://github.com/vuetifyjs/vuetify/issues/9130 */
     word-break: normal; /* maybe !important  */
   }
@@ -328,6 +337,7 @@ export default {
     --rr-timeline-summary-bg-color: white;
     --rr-timeline-summary-text-color: black;
     --rr-timeline-width: 100%;
+    overflow-y: scroll;
   }
   .v-chip.v-chip--outlined.v-chip.v-chip {
     background-color: white !important;

frontend/src/components/review-service-info/review-service-summary-graph.vue

@@ -10,73 +10,73 @@ v-card
     v-container.grey.lighten-4.mb-5.rounded-lg
       v-row(v-if="review_requested_by" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.align-center
             b
               span(v-if="review_requested_by==='Authors'") Author-driven
               span(v-else) Author-independent
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Who submitted the manuscript or initiated the feedback process? 
                 b.ml-1 {{ review_requested_by }}.
 
 
       v-row(v-if="reviewer_selected_by" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.align-center
             b
               span(v-if="reviewer_selected_by==='Editor, service, or community'") Service-selected reviewers
               span(v-else-if="reviewer_selected_by==='Self-nominated'") Self-nominated reviewers
               span(v-else-if="reviewer_selected_by==='Authors'") Author-selected reviewers
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Who selects the reviewers? 
                 b.ml-1 {{ reviewer_selected_by }} select the reviewers.
 
       v-row(v-if="public_interaction" no-gutters)
         v-row(dense)
-          v-col.d-flex
+          v-col.d-flex.align-center
             b
               span(v-if="public_interaction=='Included'") Public feedback
               span(v-else) No public interactions
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Was there an opportunity for the public to engage as an integral part of the process? 
                 b.ml-1 {{ public_interaction }}.
 
       v-row(v-if="opportunity_for_author_response" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.align-center
             b
               span(v-if="opportunity_for_author_response=='Included'") Authors reply
               span(v-else)  No author reply
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Was the author’s response included as an integral part of the process?  
                 b.ml-1 {{ opportunity_for_author_response }}.
 
       v-row(v-if="recommendation" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.align-center
             b
               span(v-if="recommendation=='Binary decision'") Binary decision 
               span(v-else-if="recommendation=='Other scale or rating'") Scaled rating
               span(v-else) No decision
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Does the service provide a decision/recommendation or a scalar rating after the review process?   
                 b.ml-1 Recommendation provided: {{ recommendation }}.
@@ -85,53 +85,54 @@ v-card
     v-container.grey.lighten-4.rounded-lg
       v-row(v-if="peer_review_policy" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.flex-row.align-center
             span Reviewing guidelines:
-            b.prd_val Yes (
-                a(:href="peer_review_policy" target="_blank" rel="noopener") read more
-                v-icon(small class="pa-1") mdi-open-in-new
-                |)
+            b.prd_val 
+              | Yes
+              | (
+              a(:href="peer_review_policy" target="_blank" rel="noopener") read more
+              | )
 
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Explicit guidelines for reviewers 
 
       v-row(v-if="review_coverage" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.flex-row.align-center
             span(v-if="review_coverage") Review coverage:
             b.prd_val {{ review_coverage }}
-            v-tooltip(right transition="fade-transition") 
+            v-tooltip(color="tooltip" right transition="fade-transition") 
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Does the feedback cover the entire paper or only a certain section or aspect?
 
       v-row(v-if="reviewer_identity_known_to" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.flex-row.align-center
             span(v-if="reviewer_identity_known_to") Reviewer identity known to:
             b.prd_val {{ reviewer_identity_known_to }}
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Are the identities of reviewers known to everyone (public), editors or service, or no one?
 
       v-row(v-if="competing_interests" no-gutters)
         v-row(dense)
-          v-col
+          v-col.d-flex.flex-row.align-center
             span(v-if="competing_interests==='Checked'") Competing interests:
             b.prd_val {{ competing_interests }}
-            v-tooltip(right transition="fade-transition")
+            v-tooltip(color="tooltip" right transition="fade-transition")
               template(v-slot:activator="{ on, hover, attrs }")
-                span(v-bind="attrs" v-on="on").ml-2
-                    v-icon(color="grey-lighten-1") mdi-information-outline
+                v-card(color="transparent" flat v-on:click.stop v-bind="attrs" v-on="on").ml-2
+                  v-icon(color="grey-lighten-1") mdi-information-outline
               span
                 i Is a declaration of competing interest required?
 </template>