From 654c54e9ab19d0e015434fcf8d4b2f2e6bffd2e8 Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Thu, 9 May 2019 17:04:36 +0200 Subject: [PATCH] Rework Assignment UI Reworks the Assignment UI to fit to the current MockUps --- .../assignment-detail.component.html | 214 +++++++++--------- .../assignment-detail.component.scss | 101 +++++++-- .../assignment-detail.component.ts | 3 - .../assignment-poll.component.html | 53 ++--- .../assignment-poll.component.scss | 23 +- .../assignment-poll.component.ts | 4 +- client/src/styles.scss | 7 +- 7 files changed, 238 insertions(+), 167 deletions(-) diff --git a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html index 4417122ae..27a5a172d 100644 --- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html +++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html @@ -51,56 +51,50 @@
- +
+ +
+
+ + +
- -
- -
-
- - -
-
- - -
- -
-
- - -
-
- - +

{{ assignment.getTitle() }}

-
- Number of persons to be elected:  - {{ assignment.assignment.open_posts }} -
-
- Phase:  - - {{ assignment.phaseString | translate }} - - - {{ assignment.phaseString | translate }} - - - - +
+
+

Number of persons to be elected

+ {{ assignment.assignment.open_posts }} +
+
+

Phase

+ + {{ assignment.phaseString | translate }} + + + {{ assignment.phaseString | translate }} + + + + +
+
- Election documents: - +

Election documents

+ {{ file.getTitle() }} @@ -120,7 +114,20 @@ - + +
+
+

Election result

+
+ +
+ +
+
- -
- +

Candidates

+ + +
+
- - - - + + + +
+ +
+ +
+
+ +
+
+ + +
+
+ - - - -
- - -
-
- -
-
- - -
-
- - + +
+
-
- -
+ +
-
+
+
@@ -39,23 +39,20 @@
-
+ +
Candidates
Votes
-
+
Quorum
- - {{ majorityChoice.display_name | translate }} - - - + {{ majorityChoice.display_name | translate }} @@ -93,7 +90,7 @@ check_box_outline_blank @@ -131,7 +128,7 @@
-
+
+ +

Election method

{{ pollMethodName | translate }}
-
-

- Hint for ballot paper -

-
- - - - -
+ + +
+ + Hint for ballot paper + + +
- +
diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss index cdf022d07..e0615a7d6 100644 --- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss +++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.scss @@ -25,6 +25,15 @@ } } +.poll-wrapper { + position: relative; + padding: 0 15px; +} + +.poll-main-content { + padding-top: 10px; +} + .poll-result { .poll-progress-bar { height: 5px; @@ -69,12 +78,13 @@ word-wrap: break-word; } } -.poll-border { - border: 1px solid lightgray; -} + .poll-menu { - justify-content: flex-end; + position: absolute; + top: 0; + right: 0; } + .poll-quorum { text-align: right; margin-right: 10px; @@ -83,6 +93,7 @@ font-size: 100%; } } + .top-aligned { position: absolute; top: 0; @@ -92,3 +103,7 @@ .wide { width: 90%; } + +.hint-form { + margin-top: 20px; +} diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts index 5779b5ec4..5c166c71d 100644 --- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts +++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.ts @@ -201,8 +201,8 @@ export class AssignmentPollComponent extends BaseViewComponent implements OnInit // TODO deep copy of this.poll (JSON parse is ugly workaround) or sending just copy of the options data: this.poll.copy(), maxHeight: '90vh', - minWidth: '450px', - maxWidth: '80vw', + width: '600px', + maxWidth: '90vw', disableClose: true }); dialogRef.afterClosed().subscribe(result => { diff --git a/client/src/styles.scss b/client/src/styles.scss index 8051b5108..e0aba1354 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -57,7 +57,8 @@ } } -.openslides-dark-theme, .openslides-developer-dark-theme { +.openslides-dark-theme, +.openslides-developer-dark-theme { .logo-container { img.dark { display: inherit; @@ -88,7 +89,8 @@ } os-site { - .active mat-icon, .active span { + .active mat-icon, + .active span { color: mat-color(map-get($openslides-developer-theme, accent)); } } @@ -249,6 +251,7 @@ mat-card { .os-card { max-width: 770px; margin-top: 20px !important; + margin-bottom: 20px !important; margin-left: auto !important; margin-right: auto !important; font-size: 16px;