IlikeCLR paper browsing page with recommendations based on liking papers

main.py

@@ -195,6 +195,21 @@ def paperVis():
     return render_template('pages/papers_vis.html')
 
 
+@app.route('/paper_like.html')
+def paperLike(standalone=False):
+    data = {"keyword": "all",
+            "page": "papers",
+            "openreviews": site_data["papers"].values(), 
+            "standalone": standalone,
+            "siteroot": "https://iclr.cc/virtual_2020/" if standalone else ""}
+    return render_template('pages/paper_like.html', **data)
+
+
+@app.route('/paper_like_standalone.html')
+def paperLikeStandalone():
+    return paperLike(True)
+
+
 @app.route('/recs.html')
 def recommendations():
     data = {"choices": site_data["author_recs"].keys(),
@@ -383,6 +398,8 @@ def your_generator_here():
     yield "sponsors", {}
     yield "workshops", {}
     yield "paperVis", {}
+    yield "paperLike", {}
+    yield "paperLikeStandalone", {}
     yield "papers", {}
     yield "paper_json", {}
     yield "index", {}

static/css/ilike.css

@@ -0,0 +1,293 @@
+.overlay{
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 250;
+    opacity: 0.5;
+
+    .overlay-content {
+        height: 100%;
+        overflow: scroll;
+    }
+}
+
+#loading {
+    background-color: gray;
+    display: none;
+}
+
+#loading-indicator {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.lds-grid {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.lds-grid div {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  animation: lds-grid 1.2s linear infinite;
+}
+.lds-grid div:nth-child(1) {
+  top: 6px;
+  left: 6px;
+  animation-delay: 0s;
+}
+.lds-grid div:nth-child(2) {
+  top: 6px;
+  left: 26px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(3) {
+  top: 6px;
+  left: 45px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(4) {
+  top: 26px;
+  left: 6px;
+  animation-delay: -0.4s;
+}
+.lds-grid div:nth-child(5) {
+  top: 26px;
+  left: 26px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(6) {
+  top: 26px;
+  left: 45px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(7) {
+  top: 45px;
+  left: 6px;
+  animation-delay: -0.8s;
+}
+.lds-grid div:nth-child(8) {
+  top: 45px;
+  left: 26px;
+  animation-delay: -1.2s;
+}
+.lds-grid div:nth-child(9) {
+  top: 45px;
+  left: 45px;
+  animation-delay: -1.6s;
+}
+@keyframes lds-grid {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.cards {
+	z-index: 5;
+}
+
+.pp-card-detail {
+  /*border: 4px solid #eee;*/
+  font-family: "Exo";
+  height: 250px;
+  padding-top : 10px;
+
+  padding-left : 15px;
+  padding-right : 15px;
+  display: none;
+}
+
+.match {
+    background-color: lightgray;
+    height: 8px;
+    margin: 2px;
+    display: none;
+}
+
+.match .matchperc {
+    height: 100%;
+    background-color: #F3BB00;
+    width: 50%;
+}
+
+.countLabel {
+	font-size: 70%;
+}
+
+.session-selector .float-right .btn {
+	padding-top: 0px;
+	padding-bottom: 0px;
+}
+
+.session-selector .float-right .btn input {
+	margin-top: -10px;
+	margin-bottom: -10px;
+}
+
+.session-selector .float-right {
+	/*margin-top: -4px;
+	margin-bottom: -4px;*/
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.session-selector .session_day .btn {
+	/*margin-top: -16px;*/
+	border-bottom-left-radius: 0px;
+	border-bottom-right-radius: 0px;
+}
+
+.session-selector .session_number .btn {
+	/*margin-top: -16px;*/
+	border-top-left-radius: 0px;
+	border-top-right-radius: 0px;
+}
+
+.session-selector .input {
+	/*margin: -40px;*/
+	/*margin-top: -16px;*/
+}
+
+.pp-mode-ilike:hover {
+	/*width: 500px;
+	height: 500px;
+	margin-top: -100px;
+	margin-bottom: -100px;
+	margin-left: -100px;
+	margin-right: -100px;*/
+	width: 150%;
+	height: 150%;
+	/*height: auto;*/
+	margin-top: -25%;
+	margin-bottom: -25%;
+	margin-left: -25%;
+	margin-right: -25%;
+	z-index: 1;
+	background-color: rgba(255,255,255,0.8);
+}
+
+.pp-mode-ilike:hover .match {
+	display: inherit;
+}
+
+.myCard:hover {
+	z-index: 1;
+}
+
+.pp-mode-ilike:hover  .pp-card-header .pp-card-detail {
+  /*border: 4px solid #eee;*/
+  display: block;
+}
+
+.pp-mode-ilike:hover .pp-card-header {
+	height: inherit;
+}
+
+.pp-mode-ilike:hover .pp-card-header .title-wrapper .feedback {
+	display: block;
+}
+
+.pp-mode-ilike:hover .pp-card-header .title-inner {
+  	padding-left: 50px;
+  	padding-right: 50px;
+}
+
+.pp-mode-ilike:hover .cards_img {
+	width: 64%;
+	max-height: 120px;
+}
+
+.pp-mode-ilike .pp-card-header {
+      /*height: 175px;*/
+      border: 1px solid #eee;
+  }
+
+
+  .pp-mode-ilike .pp-card-header .card-title {
+      font-size: 17px;
+  }
+
+  .title-wrapper {
+  	position: relative;
+  }
+
+  .title-wrapper .feedback {
+  	display: none;
+  	position: absolute;
+  	top: 0px;
+  }
+
+  .pp-mode-ilike:hover .title-wrapper .preview {
+  	display: none !important;
+  }
+
+  .title-wrapper .preview {
+  	display: none;
+  	position: absolute;
+  	top: -18px;
+  }
+
+  .title-wrapper .preview.dislike {
+  	left: 8px;
+  }
+
+  .title-wrapper  .preview.like {
+  	right: 8px;
+  }
+
+  .title-wrapper .feedback.dislike {
+  	left: 0px;
+  }
+
+  .title-wrapper  .feedback.like {
+  	right: 0px;
+  }
+/*
+  .pp-mode-ilike .pp-card-header .title-wrapper div {
+  	display: inline-block;
+  }*/
+
+    .feedback .fa-heart{
+	  margin-top: 2px;
+	  color: lightgreen;
+	}
+
+	.like .fa-thumbs-up{
+	  color: #0cb10c;
+	}
+
+	.feedback .fa-remove{
+	  color: indianred;
+	}
+
+	.feedback .fa-times{
+	  color: indianred;
+	}
+
+	.dislike .fa-thumbs-up{
+	  color: indianred;
+	  -webkit-transform: rotate(180deg);
+	}
+
+	.feedback .fa-thumbs-down{
+	  color: indianred;
+	}
+
+	.feedback .fa-stack:hover { 
+	   transform:scale(1.2);
+	   transform-origin: center;
+	   cursor: pointer;
+	}