Simplify board view #199

juliushaertl · 2017-06-20T19:33:05Z

Remove background from stacks
Make stack height match the largest one Stack should get always 100% height #84
~~Fixed stack headers, so it is clear where you are when scrolling~~
Resize stack width between 320px and 380px if there is enough space Stacks should have flexible width if enough space #82

Feedback is very welcome. I'm not sure if the resizing of the stack width is a good way or if we should just go for a fixed width there.

codecov · 2017-06-20T19:33:29Z

Codecov Report

Merging #199 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #199   +/-   ##
=======================================
  Coverage   76.56%   76.56%           
=======================================
  Files          33       33           
  Lines         973      973           
=======================================
  Hits          745      745           
  Misses        228      228

artemanufrij

looks broken on mobile device:

artemanufrij · 2017-06-20T21:11:55Z

Can't delete a stack. Delete-icon is no more visible on mouse over.

pixelipo · 2017-06-21T13:27:05Z

css/style.css

@@ -286,6 +299,10 @@ button.button-inline:hover {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+.stack ul.card-list {


no need for both ul and .card-list - you can target this element specifically with .stack > ul or simply .card-list. Best not to have too many queries in CSS

pixelipo · 2017-06-21T13:31:08Z

css/style.css

-	background-color: #f8f8f8;
+	background-color: #ffffff;
+	border-right: 1px solid #eee;
+	position: relative;


pixelipo · 2017-06-21T13:34:02Z

css/style.css

-#board #innerBoard {
-	padding: 10px;
+#innerBoard {
+	padding: 0 10px 20px 10px;


why complicate padding? You essentially just move top padding over to margin-top for #board.

Edit: in fact, you could remove the whole declaration by just giving padding: 10px to #board element

pixelipo · 2017-06-21T13:34:38Z

css/style.css

@@ -125,10 +125,11 @@ button.button-inline:hover {
 	width: 100%;
 	bottom: 0px;
 	top: 44px;
+	margin-top: 10px;


margin for a fixed element? Why not just modify top value?

pixelipo · 2017-06-21T13:43:22Z

css/style.css

@@ -264,6 +273,10 @@ button.button-inline:hover {
 	overflow: hidden;
 	display: flex;
 	min-height: 40px;
+	position: fixed;


Why fixed position? It just creates problems:

you have to give "imaginary" margin-top to .card-list (line 303). Everything seems to work just as fine without those 3 declarations

mobile issue mentioned by @artemanufrij

It works just fine if you remove those 3 lines.

The idea behind that was to keep the card title always on top even when scrolling though larger task lists. But I guess I'll remove this for now and try to add this in a separate PR. I guess it will also require some javascript magic.

Ah, that was a good idea, but yeah, probably some JS will be needed.
I'm more worried about how it would look though. Fixed titles usually require some extra style to distinguish. from the rest of the DOM

pixelipo · 2017-06-21T13:44:43Z

css/style.css

@@ -441,7 +459,7 @@ button.button-inline:hover {
 .card.create {
 	text-align: center;
 	padding: 10px;
-	margin: 10px;
+	margin: 10px 10px 0 10px;


is there any particular reason for removing bottom margin on this button?

pixelipo · 2017-06-21T13:53:08Z

css/style.css

 	.stack {
 		width: 320px;
+		min-width: 320px;


this doesn't didn't you mention resizing from 200px? Left like this, it has 0 effect because of width: 320px

pixelipo · 2017-06-21T13:55:43Z

css/style.css

 		display: inline-block;
+		position: relative;


not required - since no positioning values (e.g. top) are applied to this class.

pixelipo · 2017-06-21T14:03:45Z

css/style.css

 	vertical-align: top;
-	background-color: #f8f8f8;
+	background-color: #ffffff;
+	border-right: 1px solid #eee;


border should not be visible on mobile

pixelipo · 2017-06-21T14:04:26Z

css/style.css

 	vertical-align: top;
-	background-color: #f8f8f8;
+	background-color: #ffffff;


.stack doesn't need background-color if it's white, right?

artemanufrij · 2017-06-23T19:59:26Z

fix right margin in mobile view:

juliushaertl · 2017-06-23T20:03:18Z

@pixelipo Updated and removed the fixed header stuff.

I'm not sure if the dynamic sizing proposed in #82 of stacks makes much sense. I don't see much value, since it does only depend on the number of stacks not the browser width. What do you think, @artemanufrij @pixelipo ?

fixed

artemanufrij · 2017-06-23T20:08:07Z

I don't like think about dynamic size. I realy like current style (this PR). I vote for fix width for stacks 👍 !

pixelipo · 2017-06-23T20:34:03Z

I agree with Artem. Only a single element of the card would benefit from dynamic width - card title. Everything else takes up already existing space. It would look real bad on large screens

Signed-off-by: Julius Härtl <jus@bitgrid.net>

artemanufrij

fixed all issues as discussed in irc! great work!!!

jancborchardt · 2017-06-26T14:40:33Z

Looks much nicer and lighter without the background, good job! :)

juliushaertl added 3. to review design enhancement frontend labels Jun 20, 2017

juliushaertl added this to the 0.3.0 milestone Jun 20, 2017

juliushaertl requested review from jancborchardt, pixelipo and artemanufrij June 20, 2017 19:33

artemanufrij previously requested changes Jun 20, 2017

View reviewed changes

pixelipo previously requested changes Jun 21, 2017

View reviewed changes

pixelipo reviewed Jun 21, 2017

View reviewed changes

juliushaertl added 2. developing and removed 3. to review labels Jun 21, 2017

juliushaertl force-pushed the board-style-flex branch 3 times, most recently from 5285b29 to 87df804 Compare June 23, 2017 19:59

juliushaertl force-pushed the board-style-flex branch from 87df804 to abf1f15 Compare June 23, 2017 20:01

juliushaertl force-pushed the board-style-flex branch from abf1f15 to 544a494 Compare June 23, 2017 20:22

juliushaertl added 3. to review and removed 2. developing labels Jun 23, 2017

juliushaertl mentioned this pull request Jun 23, 2017

Stacks should have flexible width if enough space #82

Closed

juliushaertl force-pushed the board-style-flex branch from 544a494 to 752b4a8 Compare June 23, 2017 20:32

juliushaertl force-pushed the board-style-flex branch 2 times, most recently from 9fb0a16 to acdfd6b Compare June 23, 2017 20:42

Simplify board view

73139c8

Signed-off-by: Julius Härtl <jus@bitgrid.net>

juliushaertl force-pushed the board-style-flex branch from acdfd6b to 73139c8 Compare June 23, 2017 20:45

artemanufrij approved these changes Jun 23, 2017

View reviewed changes

juliushaertl merged commit 6a2dbf6 into master Jun 23, 2017

juliushaertl deleted the board-style-flex branch June 23, 2017 20:47

This was referenced Feb 3, 2024

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 qmutz/deck#19

Open

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 GOMYWAY-NETWORKS-LLC/deck#16

Open

This was referenced Mar 15, 2024

[Snyk] Fix for 1 vulnerabilities qmutz/deck#21

Open

[Snyk] Fix for 1 vulnerabilities GOMYWAY-NETWORKS-LLC/deck#17

Open

This was referenced Mar 23, 2024

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 GOMYWAY-NETWORKS-LLC/deck#18

Open

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 qmutz/deck#23

Open

This was referenced May 13, 2024

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 GOMYWAY-NETWORKS-LLC/deck#21

Open

[Snyk] Security upgrade @nextcloud/vue-dashboard from 0.1.8 to 2.0.1 qmutz/deck#26

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simplify board view #199

Simplify board view #199

juliushaertl commented Jun 20, 2017 •

edited

Loading

codecov bot commented Jun 20, 2017 •

edited

Loading

artemanufrij left a comment

artemanufrij commented Jun 20, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

juliushaertl Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

pixelipo Jun 21, 2017

artemanufrij commented Jun 23, 2017

juliushaertl commented Jun 23, 2017

artemanufrij commented Jun 23, 2017

pixelipo commented Jun 23, 2017

artemanufrij left a comment

jancborchardt commented Jun 26, 2017

Simplify board view #199

Simplify board view #199

Conversation

juliushaertl commented Jun 20, 2017 • edited Loading

codecov bot commented Jun 20, 2017 • edited Loading

Codecov Report

artemanufrij left a comment

Choose a reason for hiding this comment

artemanufrij commented Jun 20, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

artemanufrij commented Jun 23, 2017

juliushaertl commented Jun 23, 2017

artemanufrij commented Jun 23, 2017

pixelipo commented Jun 23, 2017

artemanufrij left a comment

Choose a reason for hiding this comment

jancborchardt commented Jun 26, 2017

juliushaertl commented Jun 20, 2017 •

edited

Loading

codecov bot commented Jun 20, 2017 •

edited

Loading