Mobil Kullanım

[cagrimertbakirci]

Site ilk etapta mobil kullanıma uygun bir yapıya sahip değil. Acil ihtiyaçlar giderildikten sonra mobil için ek geliştirmeler düşünebiliriz.

Şimdilik yapmamız gereken, farklı tarayıcılarda "En iyi deneyim için mobil olmayan bir cihaz kullanın." önerisini geliştirmek ve işlevsel hale getirmek.

Opsiyonel olarak, cihazı yan çevirmeyi de önerebiliriz. Bu yapılacak olursa, farklı mobil tarayıcılarda sistemin işlevsel olacak kadar elden geçirilmesi gerekiyor.

[evilese]

Mobil cihazlarda cihazı yan çevirdiğimizde kullanılabilir olması için eklenmesi gereken CSS kodları;

@media screen and (max-width:992px) {
.container {
    min-width: auto;
}
.slider-box-wrapper .slider-box img {
    width: 10px;
    height: 10px;
}
.slider-box-wrapper {
    margin-top: 0px;
}
.slider-box-wrapper {
    display: flex;
    margin-top: 0px;
    text-align: center;
    justify-content: center;
}
.slider-select-container[data-v-37312aa8] {
    width: 60px;
}
.sample .name {
    margin-top: 0px;
}
.slider-box-wrapper .slider-box {
    width: 2vw;
    height: 2vw;
}
.element .group-no, .element .period-no {
    font-size: 12px;
}
.filter-sub-title {
    font-size: .8em;
}
.filter-sub-title-smaller {
    font-size: .8em;
}
.category-type-filter-wrapper .category-type-filter {
    font-size: .7em;
}
.el-dialog__header .title[data-v-4a943589] {
    margin-top: 0;
}
.element-image {
    width: 40%;
    height: 100%;
}
.el-dialog__header {
    height: auto;
}
.dialog-body {
    padding: 0px;
}
.dialog-body>p>h2 {
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 10px;
}
.dialog-body>p {
    font-size: 11px;
    line-height: 15px;
}
}

---

/ ÖNCESİ /

---

/ SONRASI /

---

/* SCSS VERSİYON */

@media screen and (max-width:992px) {
	.container {
		min-width: 0px;
	}
	.slider-box-wrapper {
		.slider-box {
			img {
				width: 10px;
				height: 10px;
			}
			width: 2vw;
			height: 2vw;
		}
		margin-top: 0px;
		display: flex;
		margin-top: 0px;
		text-align: center;
		justify-content: center;
	}
	.slider-select-container {
		width: 60px;
	}
	.sample {
		.name {
			margin-top: 0px;
		}
	}
	.element {
		.group-no {
			font-size: 12px;
		}
		.period-no {
			font-size: 12px;
		}
	}
	.filter-sub-title {
		font-size: .8em;
	}
	.filter-sub-title-smaller {
		font-size: .8em;
	}
	.category-type-filter-wrapper {
		.category-type-filter {
			font-size: .7em;
		}
	}
	.el-dialog__header {
		.title {
			margin-top: 0;
		}
		height: auto;
	}
	.element-image {
		width: 40%;
		height: 100%;
	}
	.dialog-body {
		padding: 0px;
		>p {
			>h2 {
				font-size: 18px;
				margin-bottom: 10px;
				margin-top: 10px;
			}
			font-size: 11px;
			line-height: 15px;
		}
	}
}

[nesimtunc]

Finally someone has heard you @cagrimertbakirci and there you just got an iPad / Mac OS app already :) I will check the source code and as the contributor has suggested we might fork it into our organization.

https://github.com/evrimagaci/periodum/pull/62