Commit 74c2be9d authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Ajusta caja de favoritos y window (v. detalle) 

Mejora representación en diferentes tamaños para los componentes de las
vistas de detalle (extensión window) y de la colección de módulos
favoritos en el inicio.
parent c03163d7

src/Variables.styl

+3 −0
Original line number Diff line number Diff line
@@ -105,6 +105,9 @@ $media-high-size = 1023px 
$media-medium-size = 839px

$media-low-size = 599px



// Window

$moduleWindowMargin = 0.3rem

$moduleWindowButtonSize = 1rem



// Tipografías

$baseFontFamily = 'Open Sans', sans-serif;

src/redmic/Containers.styl

+15 −13
Original line number Diff line number Diff line
@@ -373,11 +373,13 @@ 
			flex-direction column

			justify-content center



			.center

				width 100%



		.title

			margin 0

			width 100%

			border-radius 5px

			margin-right 1px



	.infoContainer

		flex-grow 1
@@ -392,7 +394,7 @@ 


		.view

			@extend .fHeight

			padding 5px

			padding 0.3rem

			background-image $linen-light



		.moduleWindow
@@ -405,7 +407,7 @@ 


		& > div

			flex-shrink 1

			margin 5px

			margin $moduleWindowMargin

			overflow hidden

			transition-property height, width

			transition-duration .3s
@@ -414,22 +416,22 @@ 
			for col in 1..$cols

				&[data-cols=\"{col}\"]:not(.resizedByUser)

					$newWidth = (100% / $cols) * col

					width "calc(%s - 10px)" % $newWidth

					width "calc(%s - %s)" % ($newWidth (2 * $moduleWindowMargin))



			$rows = 6

			for row in 1..$rows

				&[data-rows=\"{row}\"]:not(.resizedByUser)

					height 90px * row + 10px * (row - 1)

					height 90px * row + (2 * $moduleWindowMargin) * (row - 1)



				&[data-percentage-rows=\"{row}\"]:not(.resizedByUser)

					$newHeight = (100% / $rows) * row

					height "calc(%s - 10px)" % $newHeight

					height "calc(%s - %s)" % ($newHeight (2 * $moduleWindowMargin))



		& > div.resizedByUser

			max-width calc(100% - 10px)

			max-width "calc(100% - %s)" % (2 * $moduleWindowMargin)



		.moduleWindow.resizable

			padding-bottom 15px

			padding-bottom $moduleWindowButtonSize

			resize both

			overflow hidden

			max-width 100%
@@ -445,8 +447,8 @@ 
				position absolute

				bottom 0

				right 0

				width 15px

				height 15px

				width $moduleWindowButtonSize

				height $moduleWindowButtonSize

				color gray

				background-color $colorGrayBlack

				pointer-events none
@@ -468,14 +470,14 @@ 


				.title

					font-weight bold

					padding-left 10px

					padding-left 1rem

					cursor inherited



				.buttons



					& > i

						width 15px

						height 15px

						width $moduleWindowButtonSize

						height $moduleWindowButtonSize

						text-align center

						vertical-align middle

						margin 0 2px

src/redmic/Initial.styl

+25 −9
Original line number Diff line number Diff line
@@ -7,7 +7,11 @@ 
	cursor default



	.divTitle

		margin 0 auto 0 auto

		margin 0 auto

		textEllipsis()



		span

			fontSize 3.5rem



	span

		fontSize 4rem
@@ -31,11 +35,24 @@ 


.boxContainer

	showScroll()



	.favouritesBoxItems

		display flex

		flex-wrap wrap

		justify-content start

		align-items start



		.module

			flex-grow 1



			.button

				flex-grow 1



	.boxItems

		.module

			flexible h center center

			margin 10px 0

			padding 0

			padding 0.5rem



			.button:hover, .activeBox

				fondo color $blue

			.disabled:hover
@@ -44,12 +61,11 @@ 
				opacity 0.5

			.button

				flexible v center space-between

				width 90%

				width 10rem

				bordeRedondeado()

				sombreadoCaja o

				padding 10px 0

				padding 1rem 0

				cursor pointer

				min-height 60px



				.iconModule

					align-self center
@@ -68,12 +84,12 @@ 


				.description

					flex-grow 1

					margin 0px 10px

					margin-top 10px

					margin 0px 1rem

					margin-top 1rem

			.box

				min-height 150px

				.iconModule

					font-size 3rem

					fontSize 3rem



		.lastActivityModule

			flexible h space-between center