모바일 - api 마켓 디자인 반영
This commit is contained in:
현성필
@@ -8687,6 +8687,140 @@ select.form-control {
|
||||
color: #0049b4;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.api-detail-tabs {
|
||||
gap: 0;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.api-detail-tabs .tab-button {
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.api-overview-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.api-overview-card .api-overview-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
.api-overview-card .api-method-badge {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
}
|
||||
.api-overview-card .api-endpoint {
|
||||
width: 100%;
|
||||
flex: none;
|
||||
}
|
||||
.api-overview-card .api-endpoint code {
|
||||
display: block;
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.api-overview-card .api-overview-info {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.api-overview-card .api-overview-info h4 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.api-overview-card .api-overview-info .api-info-table {
|
||||
width: 100%;
|
||||
}
|
||||
.api-overview-card .api-simple-description {
|
||||
width: 100%;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.api-overview-card .api-simple-description p {
|
||||
font-size: 14px;
|
||||
}
|
||||
.api-overview-card .detail-content {
|
||||
width: 100%;
|
||||
}
|
||||
.api-detail-card {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
.api-detail-card h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.api-detail-card .detail-content {
|
||||
font-size: 12px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.api-detail-card .detail-content table {
|
||||
min-width: 500px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.api-detail-card .detail-content table th, .api-detail-card .detail-content table td {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.api-detail-card .detail-content pre {
|
||||
padding: 8px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.api-detail-card .detail-content pre code {
|
||||
font-size: 12px;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
}
|
||||
.api-info-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.api-info-table tr {
|
||||
display: table-row;
|
||||
}
|
||||
.api-info-table th {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
width: auto;
|
||||
min-width: 80px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.api-info-table td {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.api-info-table td code {
|
||||
padding: 1px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.api-details-grid {
|
||||
gap: 16px;
|
||||
}
|
||||
.tab-content {
|
||||
gap: 24px;
|
||||
min-height: 150px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.api-detail-content {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.api-market-content {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -822,3 +822,180 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Mobile Responsive Styles (sm: 768px)
|
||||
// -----------------------------------------------------------------------------
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
// API Detail Tabs - Mobile
|
||||
.api-detail-tabs {
|
||||
gap: 0;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
font-size: $font-size-sm;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// API Overview Card - Mobile
|
||||
.api-overview-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
padding-bottom: $spacing-lg;
|
||||
|
||||
.api-overview-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-sm;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.api-method-badge {
|
||||
padding: 6px 12px;
|
||||
font-size: $font-size-xs;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.api-endpoint {
|
||||
width: 100%;
|
||||
flex: none;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-sm;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.api-overview-info {
|
||||
width: 100%;
|
||||
margin-top: $spacing-sm;
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.api-info-table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.api-simple-description {
|
||||
width: 100%;
|
||||
padding: $spacing-sm 0;
|
||||
|
||||
p {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// API Detail Card - Mobile
|
||||
.api-detail-card {
|
||||
padding-bottom: $spacing-lg;
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
// Detail Content - 모바일에서 가로 스크롤 지원
|
||||
.detail-content {
|
||||
font-size: $font-size-xs;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// 테이블 래퍼 - 가로 스크롤
|
||||
table {
|
||||
min-width: 500px; // 테이블 최소 너비 보장
|
||||
margin: $spacing-sm 0;
|
||||
|
||||
th, td {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Pre/Code 블록 - 가로 스크롤
|
||||
pre {
|
||||
padding: $spacing-sm;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
code {
|
||||
font-size: $font-size-xs;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// API Info Table - Mobile
|
||||
.api-info-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
width: auto;
|
||||
min-width: 80px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
|
||||
code {
|
||||
padding: 1px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// API Details Grid - Mobile
|
||||
.api-details-grid {
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
// Tab Content - Mobile (화면 폭 제한)
|
||||
.tab-content {
|
||||
gap: $spacing-lg;
|
||||
min-height: 150px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// API Detail Content - Mobile (화면 폭 제한)
|
||||
.api-detail-content {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// API Market Content - Mobile (화면 폭 제한)
|
||||
.api-market-content {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user