Update "Problems" function of "Profile" page

CodeforcesContestHelper · Dec 2, 2021 · cccd3c6 · cccd3c6
1 parent 70731b5
commit cccd3c6
Show file tree

Hide file tree

Showing 9 changed files with 617 additions and 76 deletions.
diff --git a/contest.html b/contest.html
@@ -29,7 +29,7 @@
 	</head>
 	<body>
 		<link class="ThemeTypeIf" rel="stylesheet" href="./css/contest/dark.css">
-		<script class="cssControler"></script>
+		<script class="cssController"></script>
 		<div class="HtmlContainer">
 			<div class="mainWrapper">
 				<img alt="User Avatar" class="singleUserAvatar">

diff --git a/css/client.css b/css/client.css
@@ -16,8 +16,8 @@ body{
 	margin: 0px;
 }
 :root{
-	--font-family: 'Consolas','Fira Code','Source Code Pro','Lucida Console','Cascadia Code','Ubuntu Mono','Monospace', sans-serif;
-	--editor-font-family:  'Consolas','Fira Code','Source Code Pro','Lucida Console','Cascadia Code','Ubuntu Mono','Monospace', sans-serif;
+	--font-family: 'Consolas','Fira Code','Source Code Pro','Lucida Console','Cascadia Code','Ubuntu Mono',monospace, sans-serif;
+	--editor-font-family:  'Consolas','Fira Code','Source Code Pro','Lucida Console','Cascadia Code','Ubuntu Mono',monospace, sans-serif;
 }
 .HtmlContainer{
 	width: 1000px;
@@ -1317,6 +1317,82 @@ pre{
 
 
 /* PROFILE */
+.profileTagsBar{
+	width: calc(100% - 50px);
+	height: 10px;
+	border-radius: 5px;
+	margin: 20px;
+	overflow: hidden;
+	display: flex;
+	flex-direction: row;
+	position: relative;
+}
+.profileProblemMain{
+	flex: 1;
+	padding: 5px 10px;
+	border-radius: 5px;
+	width: calc(100% - 50px);
+	height: 20px;
+	overflow-y: auto;
+}
+.profileProblemBlock{
+	width: calc(100% - 10px);
+	border: 3px 5px;
+	display: flex;
+	flex-direction: row;
+	font-size: 16px;
+	margin: 5px 0px;
+}
+.profileProblemTags{
+	width: calc(100% - 10px);
+	text-align: right;
+	font-size: 16px;
+	margin: 5px 0px;
+}
+.profileProblemTags > .profileTagBox{
+	margin: 0px 3px !important;
+	font-size: 12px !important;
+}
+.profileProblemSummary{
+	justify-content: center;
+	padding: 5px 10px;
+	border-radius: 5px;
+	width: calc(100% - 50px);
+	height: 20px;
+	margin: 20px 10px;
+	margin-top: 10px;
+	display: flex;
+	flex-direction: row;
+}
+.problemTagsBarContent{
+	height: 10px;
+	transition: 0.3s;
+}
+.problemTagsBarContent:hover{
+	opacity: 0.7;
+}
+.profileTagsDisplayer{
+	padding: 5px 10px;
+	border-radius: 5px;
+	width: calc(100% - 50px);
+	height: 100px;
+	overflow-y: auto;
+}
+.profileTagBox{
+	display: inline-block;
+	margin: 3px;
+	padding: 3px 5px;
+	border-radius: 5px;
+	cursor: pointer;
+}
+.profileRatingGraph{
+	border-radius: 5px;
+	margin: 15px;
+	width: calc(100% - 50px);
+	padding: 10px;
+	height: 100px;
+	position: relative;
+}
 .infoOptions .disabled, .userInfoOptions .disabled{
 	color: #777;
 }
@@ -1367,7 +1443,17 @@ pre{
 	place-items: center;
 	outline: 0;
 }
-
+.profileSelectIf{
+	transition: 0.3s;
+	height: 20px;
+	width: 20px;
+	border-radius: 10px;
+	margin: 0px 3px;
+	cursor: pointer;
+	display: grid;
+	place-items: center;
+	font-size: 14px;
+}
 
 
 .setInlineBlock{

diff --git a/css/dark.css b/css/dark.css
@@ -156,7 +156,15 @@ body{
 .modulesBlock{
     background: rgb(51, 56, 61);
 }
-
+.profileTagsDisplayer, .profileRatingGraph, .profileProblemSummary, .profileProblemMain{
+    background: rgb(51, 56, 61);
+}
+.profileSelectIf:hover{
+    background: rgb(71, 76, 81);
+}
+.profileSelectIf.selected{
+    background: #777;
+}
 
 
 

diff --git a/css/default.css b/css/default.css
@@ -173,9 +173,15 @@ body{
 .modulesBlock{
     background: #ccc;
 }
-
-
-
+.profileTagsDisplayer, .profileRatingGraph, .profileProblemSummary, .profileProblemMain{
+    background: #ccc;
+}
+.profileSelectIf:hover{
+    background: #bbb;
+}
+.profileSelectIf.selected{
+    background: #aaa;
+}
 
 
 

diff --git a/index.html b/index.html
@@ -41,7 +41,12 @@
 				}
 			}
 		</script>
-		<script class="cssControler"></script>
+		<style class="cssController"></style>
+		<style class="cssController2">
+			.profileProblemTags{
+				display: none;
+			}
+		</style>
 	</head>
 	<body>
 		<div class="HtmlContainer">
@@ -583,7 +588,31 @@
 							</div>
 						</div></div>
 						<div class="contentRowInfo" style="left: -920px">
-							<div class="contentPage" style="width: 920px;"></div>
+							<div class="contentPage" style="width: 920px; display: flex; flex-direction: column; text-align: center;">
+								<div class="profileTagsBar"></div>
+								<div class="profileTagsDisplayer"></div>
+								<div class="profileRatingGraph"></div>
+								<div class="profileProblemMain">
+									<div class="profileProblemBlock">
+
+									</div>
+								</div>
+								<div class="profileProblemSummary">
+									<span info="Difficulty"></span>
+									<input class="profileDiffInput" info="minDiff" style="width: 50px; height: 100%; font-size: 14px; background: inherit; border: 0px; color: inherit; outline: 0; font-family: var(--font-family); text-align: center"></input>
+									<input class="profileDiffInput" info="maxDiff" style="width: 50px; height: 100%; font-size: 14px; background: inherit; border: 0px; color: inherit; outline: 0; font-family: var(--font-family); text-align: center"></input>
+									<input class="profileTagsInput" info="search" style="flex: 1; height: 100%; font-size: 14px; background: inherit; border: 0px; color: inherit; outline: 0; font-family: var(--font-family); text-align: center"></input>
+									<span class="profileSelectIf profilePageLeft"><i class='fas fa-angle-left'></i></span>
+									<span style="min-width: 50px; padding: 2px" class="profileProblemPages"></span>
+									<span class="profileSelectIf profilePageRight"><i class='fas fa-angle-right'></i></span>
+									<span class="profileSelectIf profileTagsDisplayIf" style="margin-right: 10px;"><i class='fas fa-tags'></i></span>
+									<span class="profileSelectIf profileSortId profileSelectSortID selected"><i class='fas fa-hashtag'></i></span>
+									<span class="profileSelectIf profileSortId profileSelectSortRating"><i class='fas fa-star'></i></span>
+									<span class="profileSelectIf profileSortId profileSelectSortName"><i class='fas fa-sort-alpha-down'></i></span>
+									<span class="profileSelectIf profileSelectSortDirection"><i class='fas fa-caret-down green'></i></span>
+									<span class="profileGoBack" style="cursor: pointer; display: inline-block; margin-left: 6px"><span info="back"></span> <i class="fas fa-angle-right"></i></span>
+								</div>
+							</div>
 							<div class="contentPage" style="width: 920px; display: flex; flex-direction: column;">
 								<div class="infoBlock infoUserInfo" style="height: 200px; width: calc(100% - 40px); display: grid; place-items: center">
 									<div style="width: 100%">

diff --git a/js/contest.js b/js/contest.js
@@ -13,7 +13,7 @@ var contestListFormatString = `<div class="contestInfoCard {7}"><div class="cont
 // :uac=...
 // :pcnt=...
 
-var contestListFilterRegex = [/^:type(=)([a-zA-Z]+)/, /^:mode(=)(.+)/, /^:time(>|=|<|>=|<=|!=)([0-9]+)$/, /^:id(>|=|<|>=|<=|!=)([0-9]+)$/, /^:ac(>|=|<|>=|<=|!=)([0-9]+)$/, /^:pcnt(>|=|<|>=|<=|!=)([0-9]+)$/];
+var contestListFilterRegex = [/^:type(=)([a-zA-Z]+)$/, /^:mode(=)(.+)$/, /^:time(>|=|<|>=|<=|!=)([0-9]+)$/, /^:id(>|=|<|>=|<=|!=)([0-9]+)$/, /^:ac(>|=|<|>=|<=|!=)([0-9]+)$/, /^:pcnt(>|=|<|>=|<=|!=)([0-9]+)$/];
 var contestListFilterFuncs = [
 function(args, info, op){
 	return args.toLowerCase() == info[2].toLowerCase();

diff --git a/js/locale.js b/js/locale.js
@@ -134,7 +134,7 @@ var lang_en = {
 		Rating: "Rating",
 		userInfoOptionsProfile: "<span class='fas fa-address-card'></span> Open profile",
 		userInfoOptionsObserve: "<span class='fas fa-eye'></span> Observe status",
-
+		Difficulty: "Diff.",
 	},
 	input: {
 		singleContestantUsername: "Username",
@@ -150,6 +150,8 @@ var lang_en = {
 		multiContestInfoInput1: "Blank",
 		multiContestInfoInput2: "Room ID",
 		infoUsernameInput: "Username",
+		minDiff: "Min",
+		maxDiff: "Max",
 	},
 	error: {
 		errorUsernameError: "Username Error",
@@ -482,6 +484,8 @@ var lang_zh = {
 		Rating: "Rating",
 		userInfoOptionsProfile: "<span class='fas fa-address-card'></span> 个人信息",
 		userInfoOptionsObserve: "<span class='fas fa-eye'></span> 追踪状态",
+		Difficulty: "难度",
+
 
 	},
 	input: {
@@ -500,6 +504,8 @@ var lang_zh = {
 		usersPerPage: "每页用户数",
 		multiStatus: "状态",
 		infoUsernameInput: "用户名",
+		minDiff: "最小值",
+		maxDiff: "最大值",
 	},
 	error: {
 		errorUsernameError: "用户名错误",
@@ -707,7 +713,7 @@ var lang_zh = {
 	modules: {
 		modulesOpen: "<span class='fas fa-external-link-square-alt'></span> 打开",
 		modulesProblemPage: "题目界面",
-		modulesProblemPageDesc: "在此界面添加一场比赛或者题目，利用 CCHv2 的快速加载和渲染更快查看题目。在此界面添加一场比赛或者题目，利用 CCHv2 的快速加载和渲染更快查看题目",
+		modulesProblemPageDesc: "在此界面添加一场比赛或者题目，利用 CCHv2 的快速加载和渲染更快查看题目。",
 		modulesSubmissionPage: "提交记录界面",
 		modulesSubmissionPageDesc: "你可以在这里查看所有的提交记录，并且通过适当的筛选找到自己想要的记录列表。",
 		modulesBlogViewer: "博客查看器",