Merge pull request #1893 from datadryad/authors

[Submission redesign] Additional author functionality
datadryad · Dec 3, 2024 · 6b48ab7 · 6b48ab7
2 parents 197c6eb + c4002b4
commit 6b48ab7
Show file tree

Hide file tree

Showing 63 changed files with 769 additions and 524 deletions.
diff --git a/app/assets/stylesheets/scss/_buttons.scss b/app/assets/stylesheets/scss/_buttons.scss
@@ -100,7 +100,12 @@ input[type=file]::file-selector-button {
   @extend %o-button__link-style;
   padding: 5px 0;
   color: $dark-blue;
-  font-size: 0.9em;
+  font-size: 0.98rem;
+}
+
+.o-button__plain-textlink {
+  @extend %o-button__link-style;
+  color: $dark-blue;
 }
 
 .o-button__plain-text6 {

diff --git a/app/assets/stylesheets/scss/_drop.scss b/app/assets/stylesheets/scss/_drop.scss
@@ -25,9 +25,12 @@
 .dd-list-item {
 	list-style: "";
 	margin: 1rem auto;
-  padding: 1rem;		
+  padding: 1rem;
 	background-color: $lightest-blue;
-  text-align: left;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 1.5ch;
 
   &.dragon-inactive {
   }
@@ -36,7 +39,6 @@
 	  @extend %o-button__link-style;
 	  cursor: ns-resize;
 	  float: left;
-	  margin-right: 1.5ch;
 	  margin-top: 28px;
 	  &:before {
 		  font-family: 'Font Awesome 6 Free';

diff --git a/app/assets/stylesheets/scss/_input.scss b/app/assets/stylesheets/scss/_input.scss
@@ -15,13 +15,40 @@ input {
 	flex-wrap: wrap;
 	column-gap: 2ch;
 	row-gap: 1ch;
+
+	&.spaced {
+		justify-content: space-between;
+  	align-items: baseline;
+  }
 }
 
 .input-label {
 	color: $dark-navy;
 }
 
-label.optional:after, label span.details {
+.input-example, [id$='-ex'] {
+	font-size: .98rem;
+	color: $medium-gray;
+	margin-top: .35ch;
+	i:not(.fas, .far) {
+		 &:before {
+			font-style: normal;
+			display: inline-block;
+			content: 'e.g.';
+			color: $dark-gray;
+			margin-right: .5ch;
+		}
+		&.hint:before {
+			content: 'Hint:';
+		}
+		&.ie:before {
+			content: 'i.e.'
+		}
+	}
+}
+
+label.optional:after,
+label span.details {
 	display: inline-block;
 	font-size: .98rem;
 	font-weight: normal;

diff --git a/app/assets/stylesheets/scss/_keywords.scss b/app/assets/stylesheets/scss/_keywords.scss
@@ -37,7 +37,9 @@
 .c-keywords__keyword-remove {
 	border: none;
 	background-color: $medium-green;
+	border: thin solid $light-green;
 	color: white;
+	font-size: .98rem;
 	line-height: 0;
 	&:hover, &:active, &:focus {
 		background-color: $dark-blue;

diff --git a/app/assets/stylesheets/scss/_steps.scss b/app/assets/stylesheets/scss/_steps.scss
@@ -9,6 +9,10 @@
     flex-direction: column;
     align-items: center;
     flex: 1;
+    cursor: pointer;
+    &:hover .step-name {
+      text-decoration: underline;
+    }
 
     &::after {
       position: absolute;

diff --git a/app/assets/stylesheets/scss/_submission-help.scss b/app/assets/stylesheets/scss/_submission-help.scss
@@ -1,3 +1,40 @@
+#submission-help {
+  //position: sticky;
+  //bottom: 0;
+  //box-shadow: $lightest-green 0px -4px 4px -6px;
+  border-top: thick solid $lightest-green;
+  background-color: white;
+  padding: 2rem;
+  padding-left: 30px;
+  width: 100%;
+  display: flex;
+  gap: 2ch;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-direction: row-reverse; 
+
+  #submission-help-text {
+    font-size: 1rem;
+    *:first-child {
+      margin-top: 0;
+    }
+    *:last-child {
+      margin-top: 0;
+    }
+  }
+
+  @media (max-width: 811px){
+    flex-direction: column-reverse;
+    *:first-child {
+      margin-left: auto;
+    }
+  }
+
+  button {
+    white-space: nowrap;
+  }
+}
+
 #infographic {
   margin: 2ch auto;
   display: grid;

diff --git a/app/assets/stylesheets/scss/_submission.scss b/app/assets/stylesheets/scss/_submission.scss
@@ -503,45 +503,22 @@ dialog#submission-step[open] {
   h1 {
     margin-bottom: 0;
   }
-  & + h2 {
+  & + h2, & + div > h2:first-child {
     margin-top: 1.1rem;
   }
 }
 
-#submission-help {
-  //position: sticky;
-  //bottom: 0;
-  //box-shadow: $lightest-green 0px -4px 4px -6px;
-  border-top: thick solid $lightest-green;
-  background-color: white;
-  padding: 2rem;
-  padding-left: 30px;
-  width: 100%;
+.drag-instruct {
+  font-size: .98rem;
   display: flex;
+  align-items: baseline;
   gap: 2ch;
-  align-items: flex-start;
-  justify-content: space-between;
-  flex-direction: row-reverse; 
-
-  #submission-help-text {
-    font-size: 1rem;
-    *:first-child {
-      margin-top: 0;
-    }
-    *:last-child {
-      margin-top: 0;
-    }
-  }
-
-  @media (max-width: 811px){
-    flex-direction: column-reverse;
-    *:first-child {
-      margin-left: auto;
-    }
+  flex-wrap: wrap;
+  i {
+    margin: 0 .5ch;
   }
-
-  button {
-    white-space: nowrap;
+  & > * {
+    margin-bottom: 0;
   }
 }
 
@@ -571,52 +548,95 @@ dialog#submission-step[open] {
   flex-wrap: wrap;
   column-gap: 1.5ch;
   row-gap: 1ch;
+  flex: 1;
 
-  & > span {
-    display: block;
-    align-self: start;
-  }
-
-  .remove-record {
+  .remove-record, & + .remove-record {
     @extend %o-button__link-style;
     margin-top: 28px;
   }
 }
 
+%author-form-button {
+  color: $dark-blue;
+  background-color: white;
+  border: thin solid $medium-blue;
+  padding: 2px 5px;
+  &:hover, &:active, &:focus {
+    background-color: $dark-blue;
+    color: white;
+  }
+}
+
 .author-form > div {
-  flex-basis: 25%;
-  max-width: calc(25% - 2.2ch);
+  flex-basis: calc(33% - 1ch);
+  flex-shrink: 1;
+  flex-grow: 0;
+  max-width: 100%;
+  min-width: 165px;
   * {
     max-width: 100%;
     text-overflow: ellipsis;
   }
+  &.affiliation-input {
+    flex: 1;
+    min-width: 200px;
+
+    .input-line {
+      align-items: baseline;
+      gap: 1ch;
+      flex-wrap: nowrap;
+      button {
+        @extend %author-form-button;
+        line-height: 0;
+        font-size: .9rem;
+      }
+    }
+
+    & + span {
+      display: block;
+      align-self: start;
+      button {
+        @extend %author-form-button;
+        margin-top: 28px;
+        font-size: .98rem;
+        padding-bottom: 0;
+      }
+    }
+  }
   @media (max-width: $screen-lg-min) {
-    flex-basis: 50%;
-    max-width: calc(50% - 2.2ch);
+    flex-basis: calc(50% - 1ch);
   }
-  @media (max-width: 600px) {
+  @media (max-width: 520px) {
     flex-basis: 100%;
-    max-width: 100%;
+  }
+}
+
+.open .author-form > div {
+  @media (max-width: 740px) {
+    flex-basis: 100%;
+  }
+}
+
+.auth-buttons {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+
+  i {
+    transform: rotate(75deg);
+    color: $dark-gray;
   }
 }
 
 .funder-form {
   padding-bottom: 1ch;
   & > div {
-    flex-basis: 33%;
-    max-width: calc(33% - 2.2ch);
+    flex-basis: 25%;
+    flex: 1;
     * {
       max-width: 100%;
       text-overflow: ellipsis;
     }
-    @media (max-width: 800px) {
-      flex-basis: 50%;
-      max-width: calc(50% - 2.2ch);
-    }
-    @media (max-width: 600px) {
-      flex-basis: 100%;
-      max-width: 100%;
-    }
   }
 }
 

diff --git a/app/assets/stylesheets/scss/_upload-table.scss b/app/assets/stylesheets/scss/_upload-table.scss
@@ -16,10 +16,11 @@
 
 .c-uploadtable {
   min-width: 100%;
+  font-size: 1rem;
 
   th,
   td {
-    padding: $spacing-sm;
+    padding: .75rem;
     border: thin solid #888;
     text-align: left;
   }

diff --git a/app/assets/stylesheets/scss/_variables.scss b/app/assets/stylesheets/scss/_variables.scss
@@ -15,6 +15,7 @@ $light-blue: rgb(55, 150, 196);
 $lighter-blue: lighten($light-blue, 25%);
 $lightest-blue: lighten($light-blue, 44%);
 $dark-gray: rgb(78, 80, 80);
+$medium-gray: #767676;
 $light-gray: rgb(157, 159, 162);
 $lighter-gray: rgb(211, 211, 211);
 $lightest-gray: rgb(235, 235, 235);