Merged PR 436: [PBI1197残]画面レイアウトについて確認する
## 概要 [Task2712: [PBI1197残]画面レイアウトについて確認する](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2712) アカウント情報画面について、以下のデザイン修正を実施しました。 ・「Save changes」ボタンを右側に移動 ・表内の値が長かった場合に三点リーダでの省略表示から、改行して全体を表示する ## レビューポイント なし ## UIの変更 https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2712?csf=1&web=1&e=mOV4KF ## 動作確認状況 ローカルで動作確認済み ## 補足 なし
This commit is contained in:
oura.a
parent
77eeb0ea83
commit
f120f4f7e5
@ -312,7 +312,7 @@ const AccountPage: React.FC = (): JSX.Element => {
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div className={`${styles.box100} ${styles.alignLeft} `}>
|
||||
<div className={`${styles.box100} ${styles.alignRight} `}>
|
||||
<input
|
||||
type="submit"
|
||||
name="submit"
|
||||
|
||||
@ -868,9 +868,7 @@ h3 + .brCrumb .tlIcon {
|
||||
.listVertical dd {
|
||||
width: 42%;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.boxFlex {
|
||||
@ -1543,136 +1541,15 @@ _:-ms-lang(x)::-ms-backdrop,
|
||||
padding-bottom: 2rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.account.account .listVertical,
|
||||
.user.account .listVertical,
|
||||
.license.account .listVertical,
|
||||
.dictation.account .listVertical,
|
||||
.partners.account .listVertical,
|
||||
.workflow.account .listVertical {
|
||||
|
||||
.account .listVertical {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.account.account .listVertical dd .formInput,
|
||||
.user.account .listVertical dd .formInput,
|
||||
.license.account .listVertical dd .formInput,
|
||||
.dictation.account .listVertical dd .formInput,
|
||||
.partners.account .listVertical dd .formInput,
|
||||
.workflow.account .listVertical dd .formInput {
|
||||
.account .listVertical dd .formInput {
|
||||
max-width: 100%;
|
||||
}
|
||||
.account.account .listVertical dd .formCheckToggle,
|
||||
.user.account .listVertical dd .formCheckToggle,
|
||||
.license.account .listVertical dd .formCheckToggle,
|
||||
.dictation.account .listVertical dd .formCheckToggle,
|
||||
.partners.account .listVertical dd .formCheckToggle,
|
||||
.workflow.account .listVertical dd .formCheckToggle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.account.account .listVertical dd .formCheckToggle .toggleBase,
|
||||
.user.account .listVertical dd .formCheckToggle .toggleBase,
|
||||
.license.account .listVertical dd .formCheckToggle .toggleBase,
|
||||
.dictation.account .listVertical dd .formCheckToggle .toggleBase,
|
||||
.partners.account .listVertical dd .formCheckToggle .toggleBase,
|
||||
.workflow.account .listVertical dd .formCheckToggle .toggleBase {
|
||||
display: inline-block;
|
||||
width: 2.8rem;
|
||||
height: 1.6rem;
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 0.8rem;
|
||||
background: #e6e6e6;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.account.account .listVertical dd .formCheckToggle .toggleBase::after,
|
||||
.user.account .listVertical dd .formCheckToggle .toggleBase::after,
|
||||
.license.account .listVertical dd .formCheckToggle .toggleBase::after,
|
||||
.dictation.account .listVertical dd .formCheckToggle .toggleBase::after,
|
||||
.partners.account .listVertical dd .formCheckToggle .toggleBase::after,
|
||||
.workflow.account .listVertical dd .formCheckToggle .toggleBase::after {
|
||||
content: "";
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
border-radius: 50%;
|
||||
background: #999999;
|
||||
position: absolute;
|
||||
top: 0.15rem;
|
||||
left: 0.15rem;
|
||||
-moz-transition: all 0.15s ease-out;
|
||||
-ms-transition: all 0.15s ease-out;
|
||||
-webkit-transition: all 0.15s ease-out;
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
.account.account .listVertical dd .formCheckToggle input,
|
||||
.user.account .listVertical dd .formCheckToggle input,
|
||||
.license.account .listVertical dd .formCheckToggle input,
|
||||
.dictation.account .listVertical dd .formCheckToggle input,
|
||||
.partners.account .listVertical dd .formCheckToggle input,
|
||||
.workflow.account .listVertical dd .formCheckToggle input {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
heigh: 0;
|
||||
}
|
||||
.account.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
|
||||
.user.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
|
||||
.license.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
|
||||
.dictation.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase,
|
||||
.partners.account .listVertical dd .formCheckToggle input:checked ~ .toggleBase,
|
||||
.workflow.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase {
|
||||
background: #c4eeec;
|
||||
}
|
||||
.account.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase::after,
|
||||
.user.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase::after,
|
||||
.license.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase::after,
|
||||
.dictation.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase::after,
|
||||
.partners.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase::after,
|
||||
.workflow.account
|
||||
.listVertical
|
||||
dd
|
||||
.formCheckToggle
|
||||
input:checked
|
||||
~ .toggleBase::after {
|
||||
background: #00b4aa;
|
||||
top: 0.15rem;
|
||||
left: 1.35rem;
|
||||
.account .box100.alignRight {
|
||||
width: calc(1200px + 3rem);
|
||||
}
|
||||
|
||||
.menuAction {
|
||||
@ -2332,8 +2209,7 @@ tr.isSelected .menuInTable li a.isDisable {
|
||||
}
|
||||
.formChange ul.chooseMember li input + label:hover,
|
||||
.formChange ul.holdMember li input + label:hover {
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left
|
||||
center;
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
|
||||
background-size: 1.3rem;
|
||||
}
|
||||
.formChange ul.chooseMember li input:checked + label,
|
||||
@ -2344,8 +2220,8 @@ tr.isSelected .menuInTable li a.isDisable {
|
||||
}
|
||||
.formChange ul.chooseMember li input:checked + label:hover,
|
||||
.formChange ul.holdMember li input:checked + label:hover {
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat
|
||||
right center;
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
|
||||
center;
|
||||
background-size: 1.3rem;
|
||||
}
|
||||
.formChange > p {
|
||||
@ -2498,8 +2374,7 @@ tr.isSelected .menuInTable li a.isDisable {
|
||||
}
|
||||
.formChange ul.chooseMember li input + label:hover,
|
||||
.formChange ul.holdMember li input + label:hover {
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left
|
||||
center;
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
|
||||
background-size: 1.3rem;
|
||||
}
|
||||
.formChange ul.chooseMember li input:checked + label,
|
||||
@ -2510,8 +2385,8 @@ tr.isSelected .menuInTable li a.isDisable {
|
||||
}
|
||||
.formChange ul.chooseMember li input:checked + label:hover,
|
||||
.formChange ul.holdMember li input:checked + label:hover {
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat
|
||||
right center;
|
||||
background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right
|
||||
center;
|
||||
background-size: 1.3rem;
|
||||
}
|
||||
.formChange > p {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user