Adaptive web interface


(Zimorodokan) #1

@memrise please make adaptive web interface like below.

Try this code in Firefox userContent.css for testing.

@-moz-document url-prefix(https://www.memrise.com/) {
	*	{
		-webkit-box-shadow: none !important;
		-moz-box-shadow: none !important;
		box-shadow: none !important;
		font-family: Verdana, Tahoma, Calibri, sans-serif !important;
		line-height: normal !important;
		overflow: visible;
		padding: 0 !important;
		text-overflow: unset !important;
		white-space: normal !important;
		word-wrap: break-word !important;
	}
	html	{
		background-color: rgb(255, 255, 255) !important;
		font-family: Verdana, Tahoma, Calibri, sans-serif;
		font-size: 10px !important;
		min-width: 320px !important;
	}
	body	{
		background-color: rgb(255, 255, 255) !important;
		font-family: Verdana, Tahoma, Calibri, sans-serif;
		font-size: 10px !important;
		min-width: unset !important;
	}
	.session-header	{
		display: flex !important;
		justify-content: center !important;
		height: 52px !important;
		margin: 0 auto !important;
		text-align: center !important;
		width: unset !important;
	}
	.session-header .header-block.header-left	{
		align-items: center !important;
		display: flex !important;
		justify-content: space-between !important;
		line-height: 52px !important;
		margin: 0 !important;
		text-align: left !important;
		width: unset !important;
	}
	.session-header .header-block.header-left .session-logo-wrapper	{
		display: none !important;
	}
	.session-header .header-block.header-middle	{
		margin: 0 !important;
		min-width: 176px;
		width: unset !important;
	}
	.session-header .header-block.header-middle .course-details-wrapper	{
		align-items: center !important;
		display: flex !important;
		height: 48px !important;
		line-height: normal !important;
		justify-content: space-between !important;
		margin: 0 !important;
		overflow: hidden !important;
		position: relative !important;
		width: unset !important;
	}
	.session-header .header-block.header-middle .course-details-wrapper .course-details	{
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		justify-content: center !important;
		margin: 0 !important;
		padding: 0 4px !important;
		width: unset !important;
	}
	.session-header .header-block.header-middle .course-details-wrapper .course-details .course-info	{
		font-size: 12px !important;
		height: auto !important;
		letter-spacing: 0 !important;
		max-height: 16px !important;
		max-width: unset !important;
		overflow: hidden !important;
		text-align: left !important;
		width: unset !important;
	}
	.session-header .header-block.header-middle .course-details-wrapper .course-details .course-title	{
		color: rgb(255, 255, 255) !important;
		display: block !important;
		font-size: 12px !important;
		height: auto !important;
		letter-spacing: 0 !important;
		max-height: 32px !important;
		max-width: unset !important;
		overflow: hidden !important;
		text-align: left !important;
		width: unset !important;
	}
	.session-header .header-block.header-middle .course-details-wrapper .header-points	{
		height: auto !important;
		margin: 0 !important;
		padding: 0 4px !important;
		text-align: center !important;
		max-width: 6em !important;
		width: unset !important;
	}
	.session-header .header-block.header-middle .course-details-wrapper .header-points .points-wrapper	{
		display: block !important;
		margin: auto !important;
	}
	.session-header .header-block.header-middle .course-details-wrapper .header-points .points-num	{
		display: block !important;
		font-size: 10px !important;
		padding: 2px 4px !important;
		text-align: center !important;
	}
	.session-header .header-block.header-middle .bar-wrapper	{
		border-radius: 2px !important;
		height: 4px !important;
	}
	.session-header .header-block.header-right	{
		display: block !important;
		line-height: 4em !important;
		margin: 0 !important;
		width: unset !important;
	}
	.session-header .header-block.header-right .header-exit	{
		display: block !important;
		line-height: 4em !important;
		margin: 0 !important;
		text-align: center !important;
		width: 48px !important;
	}
	.session-header .header-block.header-right .header-exit .session-exit	{
		background-position: center center;
		background-repeat: no-repeat;
		display: block !important;
		height: 48px !important;
		line-height: 4em !important;
		margin: 0 !important;
		text-align: center !important;
		width: 48px !important;
	}
	#page-head	{
		min-height: 64px;
	}
	.courses-filter-container	{
		margin: -48px 0 0 !important;
	}
	.courses-filter-container a.button{
		line-height: 32px !important;
		padding: 0 8px !important;
	}
	.courses-filter-container .select-container	{
		line-height: 32px !important;
		padding: 0 8px !important;
	}
	.gardening-area	{
		display: flex !important;
		justify-content: space-between !important;
		margin: 16px auto !important;
		padding: 0 8px !important;
	}
	#left-area	{
		display: none !important;
	}
	#right-area	{
		display: none !important;
	}
	#central-area	{
		max-width: 600px !important;
		margin: 0 !important;
		width: 100% !important;
	}
	.garden-box.end_of_session	{
		left: 0 !important;
		width: auto !important;
	}
	.garden-box.end_of_session .summary .table .item	{
		margin: 0 !important;
		padding: 8px !important;
	}
	.garden-box.end_of_session .leaderboard-wrapper	{
		width: auto !important;
	}
	.garden-box.multiple_choice ol.choices,
	.garden-box.video-pre-presentation ol.choices	{
		align-items: center !important;
		display: flex !important;
		flex-direction: column !important;
		margin: 0 auto !important;
	}
	.garden-box.multiple_choice ol.choices li,
	.garden-box.video-pre-presentation ol.choices li	{
		line-height: normal !important;
		margin: 8px auto !important;
		padding: 4px 8px !important;
		text-align: left !important;
		width: 100% !important;
	}
	.garden-box.multiple_choice ol.choices li .val,
	.garden-box.video-pre-presentation ol.choices li .val	{
		min-height: unset !important;
	}
	.garden-box.multiple_choice ol.choices.grid li	{
		width: 100% !important;
	}
	.garden-box.audio-multiple-choice .audio-choices	{
		transform: scale(0.5) !important;
	}
	.garden-box.audio-multiple-choice .audio-choices .audio-choices-row	{
		height: auto !important;
	}
	.garden-box .shiny-box	{
		border-color: rgb(224, 224, 224) !important;
		color: rgb(0, 0, 0) !important;
		font-size: 14px !important;
		line-height: normal !important;
		padding: 8px 16px !important;
	}
	.garden-box .shiny-box.active	{
		background-color: rgb(244, 255, 244) !important;
	}
	.garden-box.tapping .word.active	{
		background-color: rgb(244, 244, 244) !important;
	}
	.shiny-box.choice > .index,
	.shiny-box.choice > .marking-icon	{
		display: none !important;
	}
	.shiny-box.choice > .val	{
		color: rgb(70, 70, 70) !important;
		font-size: unset !important;
		line-height: normal !important;
	}
	.garden-box .hint	{
		display: none !important;
	}
	.garden-box	{
		padding: 0 56px 0 0 !important;
	}
	.garden-box.multiple_choice	{
		padding: 0 64px 0 0 !important;
	}
	.garden-box.tapping	{
		padding: 0 64px 0 0 !important;
	}
	.garden-box.tapping .hint	{
		display: none !important;
	}
	.garden-box.tapping .word-box-response	{
		min-height: 42px !important;
	}
	.garden-box .typing-wrapper	{
		font-size: normal !important;
	}
	.garden-box .typing-wrapper .typing-type-here	{
		height: auto !important;
		line-height: normal !important;
		padding: 4px 8px !important;
	}
	.garden-box .keyboard	{
		width: auto !important;
	}
	.garden-box .keyboard a	{
		min-width: 2em !important;
		position: static !important;
	}
	.question-row	{
		display: flex !important;
		margin: 0 0 16px auto !important;
		min-height: 64px !important;
	}
	.question-row .graphic	{
		background-position: -128px 0 !important;
		background-size: 192px 32px !important;
		height: 32px !important;
		margin: 0 8px 0 0 !important;
		min-width: 32px !important;
		width: 32px !important;
	}
	.question-row .qquestion	{
		font-size: 1.8em !important;
		line-height: normal !important;
		/*padding: 0 0 0 8px !important;*/
		width: auto !important;
	}
	.question-row.video-dictation	{
		display: block !important;
		margin: 0 auto 16px !important;
	}
	.question-row .qquestion.video-dictation	{
	}
	.thing-show{
		margin: 16px 0 0 auto !important;
	}
	.badge	{
		background-color: rgb(244, 244, 244) !important;
		color: rgb(0, 0, 0) !important;
		padding: 4px 8px !important;
	}
	.thing-show .columns{
		margin: 40px auto 0 !important;
		position: relative !important;
		display: flex !important;
		flex-direction: column;
		align-items: flex-start !important;
		justify-content: flex-start !important;
	}
	.thing-show .columns .show-more-link,
	.thing-show .columns .show-less	{
		font-size: normal !important;
		margin: 4px 0 !important;
		order: 5 !important;
		padding: 4px 8px !important;
		position: static !important;
	}
	.thing-show .row	{
		border: none !important;
		margin: 4px 0 !important;
	}
	.thing-show .row.first-audio	{
		top: -40px !important;
	}
	.thing-show .row.first-audio .audio-player	{
		margin: 0 32px 0 0 !important;
	}
	.thing-show .row.primary .row-value	{
		font-size: 1.5em !important;
		margin: 0 auto !important;
		width: auto !important;
	}
	.thing-show .row.secondary .row-value	{
		font-size: 1.2em !important;
		margin: 0 auto !important;
		width: auto !important;
	}
	.thing-show .row .row-label{
		display: none !important;
		top: 0 !important;
	}
	.thing-show .row .row-value	{
		font-size: 1.2em !important;
		margin: 0 auto !important;
		width: auto !important;
	}
	.word-box-response	{
		background-color: rgb(255, 255, 255) !important;
		border-color: rgb(204, 204, 204) !important;
		border-width: 1px !important;
	}
	button	{
		font-size: 1em !important;
	}
	button.next-button	{
		display: block !important;
		height: 48px !important;
		right: 4px !important;
		top: 0 !important;
		width: 48px !important;
	}
	button.next-button .next-icon	{
		display: none !important;
	}
	button.next-button .next-text	{
		font-size: 1em !important;
		position: static !important;
	}
	.garden-box.presentation > .ico-ignore	{
		right: 10px !important;
		top: 64px !important;
	}
	.garden-box.presentation > .star	{
		right: 10px !important;
		top: 104px !important;
	}
	.garden-box .ico-growth	{
		right: 4px !important;
		top: 128px !important;
		width: 48px !important;
	}
	.btn	{
		font-size: 1em !important;
	}
	.btn.word	{
		background-color: rgb(255, 255, 255) !important;
		background-image: none !important;
		border-color: rgb(204, 204, 204) !important;
		border-width: 1px !important;
		color: rgb(70, 70, 70) !important;
		font-size: 1.5em !important;
		line-height: normal !important;
		padding: 4px 8px !important;
	}
	.btn.word > .input-number	{
		display: none !important;
	}
	.difficult-items .whitebox .wrapper .table	{
		display: table !important;
		font-size: 1em !important;
	}
	.difficult-items .whitebox .wrapper .table .tr	{
		display: table-row !important;
		font-size: 1em !important;
	}
	.difficult-items .whitebox .wrapper .table .tr .tc	{
		display: table-cell !important;
		font-size: 1em !important;
		padding: 4px 8px !important;
		vertical-align: middle !important;
		width: auto !important;
	}
	.difficult-items .whitebox .ico-growth	{
		background-size: 40px 660px !important;
		height: 40px !important;
		position: static !important;
		width: 40px !important;
	}
	.difficult-items .whitebox .ico-growth.lev1	{
		background-position: 0 -80px !important;
	}
	.difficult-items .whitebox .ico-growth.lev2	{
		background-position: 0 -160px !important;
	}
	.difficult-items .whitebox .ico-growth.lev3	{
		background-position: 0 -240px !important;
	}
	.difficult-items .whitebox .ico-growth.lev4	{
		background-position: 0 -320px !important;
	}
	.difficult-items .whitebox .ico-growth.lev5	{
		background-position: 0 -400px !important;
	}
	.difficult-items .whitebox .ico-growth.lev6	{
		background-position: 0 -480px !important;
	}
	.difficult-items .whitebox .btn-group	{
		position: static !important;
	}
	.difficult-items .whitebox	{
		border: none !important;
	}
	.difficult-items .whitebox .wrapper	{
	}
	#single-continue-wrapper > div	{
		align-items: center !important;
		display: flex !important;
		justify-content: center !important;
	}
	.garden-box.end_of_session .course_box .bottom.goal-setter-active	{
		margin: 16px auto !important;
	}
	.ico-arr-right	{
		display: none !important;
	}
	.leaderboard	{
		font-size: 1em !important;
	}
	.leaderboard-container.wide .leaderboard-controls	{
		float: none !important;
		margin: 16px auto !important;
	}
	.leaderboard .leaderboard-controls ul.btn-group	{
		margin: 0px auto !important;
		display: flex !important;
		justify-content: center !important;
	}
	.leaderboard-rows	{
		display: table !important;
		font-size: 1em !important;
		height: auto !important;
		line-height: auto !important;
		width: 100% !important;
	}
	.leaderboard-rows > .leaderboard-row	{
		display: table-row !important;
		font-size: 1em !important;
		height: auto !important;
		line-height: auto !important;
	}
	.leaderboard-rows > .leaderboard-row > *	{
		display: table-cell !important;
		font-size: 1em !important;
		height: auto !important;
		line-height: auto !important;
		padding: 4px 8px !important;
		vertical-align: middle !important;
		width: auto !important;
	}
	.single-continue-button-arrow	{
		display: none !important;
	}
	.course-card-container .course-progress-box .card-top	{
		display: flex !important;
	}
	.course-card-container .course-progress-box .card-top .card-main-container	{
		width: 100% !important;
	}
	.course-card-container .course-progress-box .card-top .card-main-container .detail	{
		width: auto !important;
	}
	.course-card-container .course-progress-box .card-top .card-main-container .detail .title	{
		max-height: unset !important;
		min-height: unset !important;
	}
	.course-card-container .course-progress-box .card-bottom	{
		background-color: unset !important;
		max-height: unset !important;
		min-height: unset !important;
	}
	.course-card-container .course-progress-box .card-bottom *	{
		font-size: 1em !important;
	}
	.course-card-container .course-progress-box .card-bottom .course-actions	{
		align-items: center !important;
		display: flex !important;
		justify-content: flex-end !important;
		height: auto !important;
		margin: 16px 0 !important;
	}
	.course-card-container .course-progress-box .card-bottom .course-actions > *	{
		margin: 0 8px !important;
	}
	.course-card-container .course-progress-box .card-top .card-main-container .top-main .wrapper	{
		display: flex !important;
		flex-direction: column !important;
	}
	.pull-right	{
		text-align: right !important;
		margin: 16px 0 !important;
	}
	.mode-selector-button	{
		border-width: 1px !important;
		border-color: rgb(224, 224, 224) !important;
		border-style: solid !important;
		height: 48px !important;
		min-width: unset !important;
	}
	.single-continue-button	{
		font-size: 1em !important;
		min-width: unset !important;
		padding: 0 8px !important;
	}
	.single-continue-button *	{
		font-size: 1em !important;
		min-width: unset !important;
	}
	.single-continue-button > div	{
		align-items: center !important;
		display: flex !important;
		height: 48px !important;
	}
	.course-card-container {
		margin: 16px 0 !important;
		border-width: 1px !important;
		border-color: rgb(224, 224, 224) !important;
		border-style: solid !important;
		border-radius: 10px !important;
		padding: 8px !important;
	}
	.garden-box .shiny-box.correct	{
		background-color: rgb(244, 255, 244) !important;
	}
	.garden-box.end_of_session .next_btn	{
		float: none !important;
	}
}

Screenshot_2018-07-18%20Garden%20-%20Memrise_2


Top hindi font cut off in review mode (and Tibetan too)
(Baite) #2

The screens look familiar. You say it’s adaptive. What is actually changed compared with what it was before? Perhaps it is very obvious and I am not seeing it.

“please make adaptive web interface like below” -> You mean this as a feature request, not?


(Zimorodokan) #3

You may turn on Responsive Design Mode in Firefox, Chrome or Opera and look on differences. For example set width 320 px.
Yes, it’s a feature request.

Below is current memrise interface on width 320 px. It’s unresponsive. Above is what I propose - it’s responsive.

Screenshot_2018-08-24%20Garden%20-%20Memrise_03
Screenshot_2018-08-24%20Garden%20-%20Memrise_04 Screenshot_2018-08-24%20Garden%20-%20Memrise_02