Add information about the journal above the fold in editorial form

cms/sass/layout/_page-header.scss

@@ -1,18 +1,76 @@
 /* Page header */
 
 .page-header {
-  min-height: 150px;
+    min-height: 150px;
 
-  @media screen and (max-width: 768px) {
-    min-height: 100px;
-  }
+    @media screen and (max-width: 768px) {
+        min-height: 100px;
+    }
 
-  /* do not underline the links, unless in an alert */
-  a:not(.alert a) {
-    text-decoration: none;
-  }
+    /* do not underline the links, unless in an alert */
+    a:not(.alert a) {
+        text-decoration: none;
+    }
 
-  .feather {
-    position: relative;
-  }
+    .feather {
+        position: relative;
+    }
 }
+
+.above_the_fold--title {
+    margin-bottom: 1rem;
+}
+
+.above_the_fold h2 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+}
+
+.above_the_fold--url {
+    color: #5c5956;
+}
+
+.above_the_fold--issns {
+    font-size: 0.9rem;
+    font-weight: bold;
+    color: $sanguine;
+    margin-top: 0;
+    margin-bottom: 1rem !important;
+}
+
+.button.button--tertiary.see_in_doaj {
+    margin-bottom: 0;
+}
+
+@media (max-width: 1279px) and (min-width: 768px) {
+    .button.button--tertiary.see_in_doaj {
+        margin-top: 1rem;
+    }
+}
+
+@media (min-height: calc((10rem + 105px) * 2.5)) {
+    main:has(> .main-header.fixed) {
+        margin-top: 10rem;
+        @media (max-width: 1279px) and (min-width: 768px) {
+            &:has(.button.button--tertiary.see_in_doaj){
+                margin-top: 13rem;
+            }
+            .button.button--tertiary.see_in_doaj {
+                margin-top: 1rem;
+            }
+        }
+        .button.button--tertiary.see_in_doaj {
+            margin-top: 1rem;
+        }
+
+        .main-header.fixed {
+            position: fixed;
+            top: 75px;
+            left: 75px;
+            z-index: 1000;
+            background-color: white;
+            width: calc(100% - 75px);
+            padding: 25px 30px;
+        }
+    }
+}

cms/sass/themes/_dashboard.scss

@@ -3,10 +3,6 @@
 .dashboard {
   font-size: 18px;
 
-  h1 {
-    margin-top: 0;
-  }
-
   > header:first-of-type {
     height: 75px;
   }

cms/sass/themes/_editorial-form.scss

@@ -3,7 +3,7 @@
 #maned_form,
 #ed_form,
 #assed_form {
-  padding: $spacing-04 0;
+  padding: 2.5rem 0;
   background: rgba($light-grey, .5);
 
   details {

doajtest/testbook/new_application_form/associate_editor_form.yml

@@ -11,6 +11,13 @@ tests:
       and click "Review application"
     results:
     - The associate editor view application form is displayed
+    - At the top the title, url and issn(s) are displayed
+    - Each item in the header has a copy button next to it
+    - step: Click each copy button and
+    - step: Paste the value somewhere (e.g., Notepad)
+    - results:
+    - correct value is copied
+    - The top section stays visible while scrolling, unless the screen is very short and the header takes more than 40% of the viewport
     - '"Unlock and Close" is available on the top right'
     - A "SAVE" button is available
     - Application Status and Subject Classification sections are available

doajtest/testbook/new_application_form/editor_form.yml

@@ -11,6 +11,13 @@ tests:
       and click "Review application"
     results:
     - The editor view of the application form is displayed
+    - At the top the title, url and issn(s) are displayed
+    - Each item in the header has a copy button next to it
+    - step: Click each copy button and
+    - step: Paste the value somewhere (e.g., Notepad)
+      results:
+        - correct value is copied
+        - The top section stays visible while scrolling, unless the screen is very short and the header takes more than 40% of the viewport
     - '"Unlock and Close" is available on the top right'
     - The ability to assign to an associate editor is available, and the ability to
       change the editor group is disabled

doajtest/testbook/new_application_form/maned_form.yml

@@ -11,6 +11,13 @@ tests:
       and click "Review application"
     results:
     - The managing editor view application form is displayed
+    - At the top the title, url and issn(s) are displayed
+    - Each item in the header has a copy button next to it
+  - step: Click each copy button and
+  - step: Paste the value somewhere (e.g., Notepad)
+    results:
+    - correct value is copied
+    - The top section stays visible while scrolling, unless the screen is very short and the header takes more than 40% of the viewport
     - '"Unlock and Close" is available'
     - The Quick Reject feature is available
     - The ability to assign to an editor group and associate editor is available

doajtest/testbook/new_application_form/publishers_form.yml

@@ -8,6 +8,9 @@ tests:
     role: publisher
   steps:
   - step: Go to the application form
+    results:
+    - The top section displays only the journal title
+    - There is no fixed/sticky section
   - step: Click the question mark next to the questions.
     results:
     - A pop-up help box appears 'You can click the link in the help box'

portality/constants.py

@@ -27,6 +27,7 @@
 
 APPLICATION_TYPE_UPDATE_REQUEST = "update_request"
 APPLICATION_TYPE_NEW_APPLICATION = "new_application"
+ES_TYPE_JOURNAL = "journal"
 
 INDEX_RECORD_TYPE_UPDATE_REQUEST_UNFINISHED = "Update Request (in progress)"
 INDEX_RECORD_TYPE_UPDATE_REQUEST_FINISHED = "Update Request (finished)"

portality/models/v2/journal.py

@@ -8,6 +8,7 @@
 
 from unidecode import unidecode
 
+from portality import constants
 from portality.core import app
 from portality.dao import DomainObject
 from portality.lib import es_data_mapping, dates, coerce
@@ -572,7 +573,7 @@ def _generate_index(self):
 
 
 class Journal(JournalLikeObject):
-    __type__ = "journal"
+    __type__ = constants.ES_TYPE_JOURNAL
 
     __SEAMLESS_STRUCT__ = [
         shared_structs.JOURNAL_BIBJSON,

portality/static/js/doaj.js

@@ -67,6 +67,7 @@ var doaj = {
         });
 
         doaj.bindMiniSearch();
+
     },
 
     doajUrlShortener : function(query, success_callback, error_callback) {

portality/static/js/util.js

@@ -0,0 +1,51 @@
+$.extend(true, doaj, {
+    util: {
+        clickToCopy: () => {
+            const copyBtn = `
+            <button type="button" class="click-to-copy" aria-label="Copy value to clipboard">
+                <i data-feather="copy" aria-hidden="true"></i>
+                <i data-feather="check" aria-hidden="true" style="display: none;"></i>
+                <span class="click-to-copy--confirmation" style="display: none;">copied</span>
+            </button>
+        `;
+
+            const onClick = function (event, $valueElem) {
+                if (!$valueElem.length) return;
+                const textToCopy = $valueElem.val() || $valueElem.text();
+                const $btn = $(event.currentTarget);
+                const $msg = $btn.find('.click-to-copy--confirmation');
+                const $copyIcon = $btn.find('.feather-copy');
+                const $copiedIcon = $btn.find('.feather-check');
+
+                navigator.clipboard.writeText(textToCopy)
+                    .then(() => {
+                        $btn.addClass('click-to-copy--clicked');
+                        $msg.show();
+                        $copyIcon.hide();
+                        $copiedIcon.show();
+                        setTimeout(() => {
+                            $btn.removeClass('click-to-copy--clicked');
+                            $msg.hide();
+                            $copiedIcon.hide();
+                            $copyIcon.show();
+                        }, 3000);
+                    })
+                    .catch(err => console.error('Failed to copy:', err));
+            };
+
+            $("[data-widget--click-to-copy]").each(function () {
+                const $element = $(this);
+                const $copyBtn = $(copyBtn);
+                $copyBtn[0].id = $element[0].id + '-copy';
+                $copyBtn.attr('data-copy-target', $element[0].id);
+                $copyBtn.attr('aria-label', `Copy "${$element.val() || $element.text()}" to clipboard`);
+                $copyBtn.data('copyTarget', $element);
+                $element.after($copyBtn);
+                $copyBtn.on("click", (event) => onClick(event, $element));
+            });
+
+        }
+    }
+});
+
+doaj.util.clickToCopy();

portality/templates-v2/includes/_js_includes.html

@@ -36,6 +36,7 @@
 
 <!-- get the app's js -->
 <script type="text/javascript" src="/static/js/doaj.js?v={{config.get('DOAJ_VERSION')}}"></script>
+<script type="text/javascript" src="/static/js/util.js?v={{config.get('DOAJ_VERSION')}}"></script>
 
 <!-- get our dates libs -->
 <script type="text/javascript" src="/static/js/dates.js?v={{config.get('DOAJ_VERSION')}}"></script>

portality/templates-v2/management/_application-form/includes/_editorial_form_body.html

@@ -4,7 +4,6 @@
 
 {% if obj and (obj.es_type == 'journal' and obj.is_in_doaj()) %}
     {{ _msg.build_journal_withdrawn_deleted_msg(obj) }}
-    <a class="button button--tertiary" href="{{ url_for('doaj.toc', identifier=obj.id) }}" target="_blank">See this journal in DOAJ</a>
 {% endif %}
 
 

portality/templates-v2/management/_application-form/includes/_fixed_header.html

@@ -0,0 +1,23 @@
+<div class="row">
+    <div class="col-md-8 above_the_fold">
+        <h1 class="above_the_fold--title">{% if obj.es_type == constants.ES_TYPE_JOURNAL %}Journal{% elif obj.application_type == constants.APPLICATION_TYPE_UPDATE_REQUEST %}Update Request{% else %}Application{% endif %}: <span id="above_the_fold__title" data-widget--click-to-copy>{{ obj.bibjson().title }}</span></h1>
+        <h2><a class="text-muted above_the_fold--url" id="above_the_fold__url" href='{{ obj.bibjson().journal_url }}' target="_blank" data-widget--click-to-copy>{{ obj.bibjson().journal_url }}</a></h2>
+        <p class="above_the_fold--issns">
+            <span data-feather="book-open"></span>
+            {% if obj.bibjson().pissn %}
+                P: <span id="above_the_fold__pissn" data-widget--click-to-copy>{{ obj.bibjson().pissn }}</span>
+                {% if obj.bibjson().eissn %}
+                    /
+                {% endif %}
+            {% endif %}
+            {% if obj.bibjson().eissn %}
+            E: <span id="above_the_fold__eissn" data-widget--click-to-copy>{{ obj.bibjson().eissn }}</span>
+            {% endif %}
+        </p>
+    </div>
+    {% if obj and (obj.es_type == constants.LOCK_JOURNAL and obj.is_in_doaj()) %}
+        <div class="col-md-4 align-right">
+            <a class="button button--tertiary see_in_doaj" href="{{ url_for('doaj.toc', identifier=obj.id) }}" target="_blank">See this journal in DOAJ</a>
+        </div>
+    {% endif %}
+</div>

portality/templates-v2/management/admin/dashboard.html

@@ -4,8 +4,8 @@
 {% block page_title %}Managing Editor Dashboard{% endblock %}
 
 {% block page_header %}
-    Hi, {% if current_user.name %}{{ current_user.name }}{% else %}
-    {{ current_user.id }}{% endif %}!
+    <h1>Hi, {% if current_user.name %}{{ current_user.name }}{% else %}
+    {{ current_user.id }}{% endif %}!</h1>
 {% endblock %}
 
 {% block admin_content %}

portality/templates-v2/management/admin/maned_application.html

@@ -9,8 +9,12 @@
 {% set notabs = true %}
 {% set diff_table = true %}
 {% set quick_reject = true %}
+{% set header_style = "fixed" %}
+
+{% block page_header %}
+{% include "management/_application-form/includes/_fixed_header.html" with context %}
+{% endblock %}
 
-{% block page_title %}{% if obj.application_type == constants.APPLICATION_TYPE_UPDATE_REQUEST %}Update Request{% else %}Application{% endif %}: {{ obj.bibjson().title }}{% endblock %}
 {% block body_id %}apply{% endblock %}
 
 {% block admin_content scoped %}
@@ -53,3 +57,10 @@ <h3 id="modalLabel-quick_reject" class="modal__title">
         </script>
     {% endif %}
 {% endblock %}
+
+{% block management_js %}
+{{ super() }}
+<script>
+    feather.replace()
+</script>
+{% endblock %}

portality/templates-v2/management/admin/maned_journal.html

@@ -30,7 +30,10 @@
 {% set quick_reject = false %}
 {% set withdrawable = true %}
 
-{% block page_title %}Journal: {{ obj.bibjson().title }}{% endblock %}
+{% set header_style = "fixed" %}
+{% block page_header %}
+{% include "management/_application-form/includes/_fixed_header.html" with context %}
+{% endblock %}
 {% block body_id %}apply{% endblock %}
 
 {% block admin_content scoped %}

portality/templates-v2/management/base.html

@@ -12,9 +12,19 @@
 {% endblock %}
 
 {% block base_stylesheets %}
-    {% block management_stylesheets %}{% endblock %}
+    {% block management_stylesheets %}
+    {% endblock %}
 {% endblock %}
 
+{% block page_header %}
+    {% if header_style|default('') == "fixed" %}
+        {% include "management/_application-form/includes/_fixed_header.html" with context %}
+    {% else %}
+        <h1>
+            {{ self.page_title() }}
+        </h1>
+    {% endif %}
+{% endblock %}
 {% block body_class %}dashboard{% endblock %}
 
 {# ~~Dashboard:Template~~ #}
@@ -72,12 +82,10 @@ <h2 class="sr-only">DOAJ Dashboard</h2>
         </nav>
         {% block nav %}{% endblock %}
     </header>
-
-
     <main>
-        <header class="main-header">
+        <header class="main-header {{ header_style }}">
             <div class="row">
-                <header class="col-md-6 col-lg-4">
+                <header class="col-md-6 col-lg-6">
                     <p class="label tag">
                         <small>
                             <a href="{{ url_for('account.username', username=current_user.id) }}" title="Manage my profile & settings">
@@ -93,13 +101,8 @@ <h2 class="sr-only">DOAJ Dashboard</h2>
                             </a>
                         </small>
                     </p>
-                    <h1>
-                        {% block page_header %}
-                            {{ self.page_title() }}
-                        {% endblock %}
-                    </h1>
                 </header>
-                <nav class="col-md-6 col-lg-8 align-right">
+                <nav class="col-md-6 col-lg-6 align-right">
                     <dl>
                         {% if current_user.has_role("admin") %}
                             {% if managed_groups and managed_groups|length > 0 %}
@@ -168,6 +171,11 @@ <h1>
                     </dl>
                 </nav>
             </div>
+            <div class="row">
+                <div class="col-lg-12">
+                    {{ self.page_header() }}
+                </div>
+            </div>
         </header>
         {% include "includes/_flash_notification.html" %}
         {% block management_content %}{% endblock %}