summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/assets/javascripts/rectangles/engine/map/draw.js19
-rw-r--r--public/assets/javascripts/rectangles/engine/rooms/_rooms.js2
-rwxr-xr-xpublic/assets/stylesheets/app.css77
-rw-r--r--server/lib/views/index.js5
-rw-r--r--views/projects/list-projects.ejs34
5 files changed, 88 insertions, 49 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 6c27ff1..7eb6e7c 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -40,20 +40,29 @@ Map.Draw = function(map, opt){
// changes the ctx temporarily
draw.render = function(){
- var thumbnail_side = 1000
+ var thumbnail_width = 1000
+ var thumbnail_height = 750
var extent = Rooms.extent()
var center = extent.center()
- var zoom = thumbnail_side / Math.max( extent.width(), extent.height() ) * 0.99
+ var extent_width = extent.width()
+ var extent_height = extent.height()
+ var zoom
+ if (extent_width > extent_height) {
+ zoom = thumbnail_width / extent.width() * 0.9
+ }
+ else {
+ zoom = thumbnail_height / extent.height() * 0.9
+ }
var canvas = document.createElement("canvas")
ctx = canvas.getContext('2d')
- canvas.width = thumbnail_side
- canvas.height = thumbnail_side
+ canvas.width = thumbnail_width
+ canvas.height = thumbnail_height
draw.clear()
- ctx.translate( thumbnail_side * 1/2, thumbnail_side * 1/2)
+ ctx.translate( thumbnail_width * 1/2, thumbnail_height * 1/2)
ctx.scale( zoom, zoom )
ctx.translate( center.a, -center.b )
ctx.scale( -1, 1 )
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 0c3cfd4..3603f0c 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -120,11 +120,9 @@
base.extent = function(){
var extent = new Rect ( new vec2(Infinity, -Infinity), new vec2(Infinity, -Infinity) )
-
base.forEach(function(room){
extent.expand(room.rect)
})
-
return extent
}
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index d47b5a7..24ca772 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -327,27 +327,42 @@ iframe.embed {
.projectList {
display: inline-block;
float: left;
- width: 100%;
+ width: 98vw;
+ margin: 2vw;
}
+.projectList a {
+ width: 32vw;
+ float:left;
+ clear: right;
+ padding-bottom: 2vw;
+}
.projectList .room {
- width: 50%;
- height:40vh;
+ width: 30vw;
+ height: 23vw;
+ margin: 1vw;
+ border: 1vw solid white;
display:table;
position: relative;
- float:left;
- border-top:1px solid;
+ z-index: 1;
}
-
-.projectList .room:nth-child(3n+2) {
- border-right:1px solid black;
+.projectList .holder {
+ position: absolute;
+ top: 50%;
+ z-index: 2;
}
-.projectList .room:nth-child(3n+1) {
- width: 100%;
- height: 50vh;
+.room .mask {
+ position: absolute;
+ top: 0; left: 0;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ overflow: hidden;
+ background-size: cover;
+ background-repeat: no-repeat;
}
-
.room .images {
position: absolute;
top: 0; left: 0;
@@ -358,15 +373,28 @@ iframe.embed {
overflow: hidden;
}
.room .images img {
- max-height: 100%;
- max-width: 100%;
+ width: 50%;
+ position: absolute;
}
+.room .images[data-mediacount='1'] img:nth-child(1) { left: 20%; top: 20%; }
+
+.room .images[data-mediacount='2'] img:nth-child(1) { left: 51%; bottom: 0%; width: auto; height: 100%; }
+.room .images[data-mediacount='2'] img:nth-child(2) { right: 51%; bottom: 0%; width: auto; height: 100%; }
+
+.room .images[data-mediacount='3'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='3'] img:nth-child(2) { left: 51%; bottom: 0%; width:auto; height:100%;}
+.room .images[data-mediacount='3'] img:nth-child(3) { right: 51%; top: 61%; }
+
+.room .images[data-mediacount='4'] img:nth-child(1) { right: 51%; bottom: 41%; }
+.room .images[data-mediacount='4'] img:nth-child(2) { left: 51%; bottom: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(3) { right: 51%; top: 61%; }
+.room .images[data-mediacount='4'] img:nth-child(4) { left: 51%; top: 41%; }
+
.page .btn {
clear: both;
padding: 30px 0;
border: 0;
-
}
.page .viewMore {
@@ -385,22 +413,21 @@ iframe.embed {
vertical-align: middle;
}
-.page .room .holder a {
- font-weight: 300;
- font-size: 20px;
- letter-spacing: 1px;
+.page label {
+ font-weight: 500;
+ font-size: 15px;
color: black;
- background: white;
- border: 1px solid;
padding: 5px;
- box-shadow: -3px 3px black;
text-decoration:none;
- max-width: 180px;
display: inline-block;
+ cursor: pointer;
}
-.page .room .holder a:hover {
- background:black;
+.projectList a:hover {
+ background: linear-gradient( 0deg, blue, red );
+}
+
+.projectList a:hover label {
color:white;
}
diff --git a/server/lib/views/index.js b/server/lib/views/index.js
index ca48159..3f3880f 100644
--- a/server/lib/views/index.js
+++ b/server/lib/views/index.js
@@ -139,6 +139,11 @@ views.profile = function (req, res) {
projects = projects.map(function(project){
project = project.toObject()
project.date = moment(project.updated_at).format("M/DD/YYYY")
+ if (project.colors.wall && project.colors.wall[0] == project.colors.wall[1] && project.colors.wall[1] == project.colors.wall[2] && project.colors.wall[2] > 238) {
+ project.color = [238,238,238]
+ } else {
+ project.color = project.colors.wall
+ }
return project
})
done(err, user, projects)
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index a12f237..f469f5c 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -4,31 +4,31 @@
[[ projects.forEach(function(project, i) { ]]
- <span class="room">
- <span class="images">
- <img src="[[- project.photo ]]">
+ [[ if (String(user._id) == String(project.user_id)) { ]]
+ <a href="/project/[[- project.slug ]]/edit">
+ [[ } else { ]]
+ <a href="/project/[[- project.slug ]]" class="roomName">
+ [[ } ]]
+
+ <span class="room" style="background-color: rgb([[- project.color ]]);">
+ <span class="images" data-mediaCount="[[- Math.min(project.media.length, 1) ]]">
[[ mediaCount = 0 ]]
[[ project.media.some(function(media){ ]]
[[ if (media.media.type != "image") { return false } ]]
- [[ if (++mediaCount > 3) { return true } ]]
+ [[ if (++mediaCount > 1) { return true } ]]
<img src="[[- media.media.url ]]">
[[ }) ]]
</span>
-
- <div class="holder">
- [[ if (String(user._id) == String(project.user_id)) { ]]
- <a href="/project/[[- project.slug ]]/edit">
- [[- project.name ]]<br>
- [[- project.date ]]
- </a>
- [[ } else { ]]
- <a href="/project/[[- project.slug ]]" class="roomName">
- [[- project.name ]]<br>
- [[- project.date ]]
- [[ } ]]
- </div>
+ <span class="mask" style="background-image: url([[- project.photo ]]);">
+ </span>
</span>
+ <label>
+ [[- project.name ]]<br>
+ Created &ndash; [[- project.date ]]
+ </label>
+
+ </a>
[[ }) ]]
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 20:06:35 +0000