nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update navcigator/create-room layout

Browse Source
This commit is contained in:
MyNameIsBatman 2022-02-13 13:10:15 -03:00
parent 3ebe441906
commit f41aafaae9
2 changed files with 39 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/navigator/views/creator/NavigatorRoomCreatorView.scss
View File

@ -1,7 +1,8 @@
.room-model-list { .room-model-list {
display: flex; display: flex;
overflow-x: auto; flex-direction: column;
scroll-snap-type: x mandatory; overflow-y: auto;
scroll-snap-type: y mandatory;
scroll-behavior: smooth; scroll-behavior: smooth;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;

24
src/views/navigator/views/creator/NavigatorRoomCreatorView.tsx
View File

@ -66,15 +66,12 @@ export const NavigatorRoomCreatorView: FC<NavigatorRoomCreatorViewProps> = props
}, [ name, description, category, visitorsCount, tradesSetting, selectedModelName ]); }, [ name, description, category, visitorsCount, tradesSetting, selectedModelName ]);
return ( return (
<div className="text-black d-flex flex-column h-100 justify-content-center"> <div className="text-black d-flex gap-3 h-100">
<div className="row row-cols-2 mb-2"> <div className="w-100 d-flex flex-column gap-2">
<div className="col mb-2">
<div className="form-group"> <div className="form-group">
<label>{ LocalizeText('navigator.createroom.roomnameinfo') }</label> <label>{ LocalizeText('navigator.createroom.roomnameinfo') }</label>
<input type="text" className="form-control form-control-sm" onChange={ (e) => setName(e.target.value) } /> <input type="text" className="form-control form-control-sm" onChange={ (e) => setName(e.target.value) } />
</div> </div>
</div>
<div className="col">
<div className="form-group"> <div className="form-group">
<label>{ LocalizeText('navigator.category') }</label> <label>{ LocalizeText('navigator.category') }</label>
<select className="form-select form-select-sm" onChange={ (e) => setCategory(e.target.value) }> <select className="form-select form-select-sm" onChange={ (e) => setCategory(e.target.value) }>
@ -84,8 +81,6 @@ export const NavigatorRoomCreatorView: FC<NavigatorRoomCreatorViewProps> = props
}) } }) }
</select> </select>
</div> </div>
</div>
<div className="col">
<div className="form-group"> <div className="form-group">
<label>{ LocalizeText('navigator.maxvisitors') }</label> <label>{ LocalizeText('navigator.maxvisitors') }</label>
<select className="form-select form-select-sm" onChange={ (e) => setVisitorsCount(e.target.value) }> <select className="form-select form-select-sm" onChange={ (e) => setVisitorsCount(e.target.value) }>
@ -95,8 +90,6 @@ export const NavigatorRoomCreatorView: FC<NavigatorRoomCreatorViewProps> = props
}) } }) }
</select> </select>
</div> </div>
</div>
<div className="col">
<div className="form-group"> <div className="form-group">
<label>{ LocalizeText('navigator.tradesettings') }</label> <label>{ LocalizeText('navigator.tradesettings') }</label>
<select className="form-select form-select-sm" onChange={ (e) => setTradesSetting(Number(e.target.value)) }> <select className="form-select form-select-sm" onChange={ (e) => setTradesSetting(Number(e.target.value)) }>
@ -105,25 +98,24 @@ export const NavigatorRoomCreatorView: FC<NavigatorRoomCreatorViewProps> = props
<option value="2">{ LocalizeText('${navigator.roomsettings.trade_allowed}') }</option> <option value="2">{ LocalizeText('${navigator.roomsettings.trade_allowed}') }</option>
</select> </select>
</div> </div>
</div> <div className="form-group">
</div>
<div className="form-group mb-3">
<label>{ LocalizeText('navigator.createroom.roomdescinfo') }</label> <label>{ LocalizeText('navigator.createroom.roomdescinfo') }</label>
<input type="text" className="form-control form-control-sm" onChange={ (e) => setDescription(e.target.value) } /> <input type="text" className="form-control form-control-sm" onChange={ (e) => setDescription(e.target.value) } />
</div> </div>
<div className="room-model-list pb-2 mb-2"> <button className="btn btn-success mt-auto" onClick={ () => createRoom() } disabled={ !name || name.length < 3 }>{ LocalizeText('navigator.createroom.create') }</button>
</div>
<div className="room-model-list w-100 gap-2">
{ {
NAVIGATOR_ROOM_MODELS.map(model => NAVIGATOR_ROOM_MODELS.map(model =>
{ {
return (<div key={ model.name } onClick={ () => selectModel(model.name) } className={ 'h-100 cursor-pointer d-flex flex-column justify-content-center align-items-center p-1 me-2 rounded border border-2' + classNames({ ' active': selectedModelName === model.name, ' disabled': GetSessionDataManager().clubLevel < model.clubLevel }) }> return (<div key={ model.name } onClick={ () => selectModel(model.name) } className={ 'cursor-pointer position-relative d-flex flex-column justify-content-center align-items-center p-1 rounded border border-2' + classNames({ ' active': selectedModelName === model.name, ' disabled': GetSessionDataManager().clubLevel < model.clubLevel }) }>
{ model.clubLevel > HabboClubLevelEnum.NO_CLUB && <div className="position-absolute top-1 end-1"><CurrencyIcon type="hc" /></div> }
<img alt="" src={ getRoomModelImage(model.name) } /> <img alt="" src={ getRoomModelImage(model.name) } />
<div>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</div> <div>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</div>
{ model.clubLevel > HabboClubLevelEnum.NO_CLUB && <CurrencyIcon type="hc" /> }
</div>); </div>);
}) })
} }
</div> </div>
<button className="btn btn-success float-end" onClick={ () => createRoom() } disabled={ !name || name.length < 3 }>{ LocalizeText('navigator.createroom.create') }</button>
</div> </div>
); );
} }