Skip to content
Permalink
Browse files

Improve styling of students list search bar

  • Loading branch information
vinutv committed Jan 7, 2020
1 parent 11f7077 commit bde7d73921df68e690320b9e1275951b15b56314
@@ -219,7 +219,7 @@ let make =
className="p-2 bg-white flex items-center justify-center p-2 m-2 rounded">
{isCourseAuthor
? <img src=schoolIconPath alt=schoolName />
: <a href="/school">
: <a className="text-xs" href="/school">
<img src=schoolIconPath alt=schoolName />
</a>}
</div>
@@ -134,7 +134,7 @@ let dropDownContents = (updateFilterCB, filter) => {
key=title
title={"Order by " ++ title}
onClick={_ => updateFilterCB(filter |> Filter.updateSortBy(sortBy))}
className="block bg-white leading-snug border border-gray-400 rounded-lg focus:outline-none focus:bg-white focus:border-gray-500 px-6 py-3 ">
className="w-full font-semibold text-xs p-3 text-left focus:outline-none ">
<i className={sortBy |> Filter.sortByIcon} />
<span className="ml-2"> {title |> str} </span>
</button>;
@@ -145,9 +145,10 @@ let dropDownSelected = filter => {
let title = filter |> Filter.sortBy |> Filter.sortByTitle;
<button
title={"Order by " ++ title}
className="block bg-white leading-snug border border-gray-400 rounded-lg focus:outline-none focus:bg-white focus:border-gray-500 px-6 py-3 ">
className="block bg-white leading-snug font-semibold border border-gray-400 rounded focus:outline-none focus:bg-white focus:border-gray-500 p-3 text-xs ">
<i className={filter |> Filter.sortBy |> Filter.sortByIcon} />
<span className="ml-2"> {title |> str} </span>
<i className="fas fa-caret-down ml-3" />
</button>;
};

@@ -173,7 +174,7 @@ let setLoading = (send, loading) => send(SetLoading(loading));
let make = (~courseId, ~courseCoachIds, ~schoolCoaches, ~levels, ~studentTags) => {
let (state, send) = React.useReducer(reducer, initialState(studentTags));

<div className="flex flex-1 flex-col bg-gray-100 overflow-hidden">
<div className="flex flex-1 flex-col">
{switch (state.formVisible) {
| None => ReasonReact.null
| CreateForm =>
@@ -202,76 +203,100 @@ let make = (~courseId, ~courseCoachIds, ~schoolCoaches, ~levels, ~studentTags) =
/>
</SchoolAdmin__EditorDrawer>;
}}
<div className="max-w-3xl w-full mx-auto flex justify-between py-2 mt-4">
<a
className="btn btn-default no-underline"
href={"/school/courses/" ++ courseId ++ "/inactive_students"}>
{"Inactive Students" |> str}
</a>
{state.selectedStudents |> Array.length > 0
? React.null
: <button
onClick={_e => send(UpdateFormVisible(CreateForm))}
className="btn btn-primary ml-4">
<i className="fas fa-user-plus mr-2" />
<span> {"Add New Students" |> str} </span>
</button>}
</div>
<div className="w-full">
<div className="mx-auto max-w-3xl">
<div className="flex w-full items-center">
<StudentsEditor__Search
filter={state.filter}
updateFilterCB={updateFilter(send)}
tags={state.tags}
levels
/>
<div className="w-1/4 ml-2 mt-2">
{<Dropdown
selected={dropDownSelected(state.filter)}
contents={dropDownContents(updateFilter(send), state.filter)}
/>}
</div>
</div>
<div className="flex flex-wrap">
{state.selectedStudents
|> Array.map(selectedStudent =>
<div
className="flex items-center bg-white border border-gray-300 px-2 py-1 mr-1 rounded-lg mt-2">
{switch (selectedStudent |> SelectedStudent.avatarUrl) {
| Some(avatarUrl) =>
<img
className="w-5 h-5 rounded-full mr-2 object-cover"
src=avatarUrl
/>
| None =>
<Avatar
name={selectedStudent |> SelectedStudent.name}
className="w-5 h-5 mr-2"
/>
}}
<div className="text-sm">
<span className="text-black font-semibold inline-block ">
{selectedStudent |> SelectedStudent.name |> str}
</span>
<button
className="ml-2 hover:bg-gray-300 cursor-pointer"
onClick={_ =>
deselectStudent(
send,
selectedStudent |> SelectedStudent.id,
)
}>
<i className="fas fa-times" />
</button>
</div>
<div className="px-6 pb-4 flex-1 bg-gray-100 relative overflow-y-scroll">
<div
className="max-w-3xl w-full mx-auto flex justify-between border-b mt-4">
<ul className="flex font-semibold text-sm items-end">
<li
className="px-3 py-3 md:py-2 text-primary-500 border-b-3 border-primary-500 -mb-px">
<span> {"All Students" |> str} </span>
</li>
<li
className="rounded-t-lg cursor-pointer border-b-3 border-transparent hover:bg-gray-200 hover:text-gray-900">
<a
className="block px-3 py-3 md:py-2 text-gray-800"
href={"/school/courses/" ++ courseId ++ "/inactive_students"}>
{"Inactive Students" |> str}
</a>
</li>
</ul>
{state.selectedStudents |> Array.length > 0
? React.null
: <div className="pb-2">
<button
onClick={_e => send(UpdateFormVisible(CreateForm))}
className="btn btn-primary ml-4">
<i className="fas fa-user-plus mr-2" />
<span> {"Add New Students" |> str} </span>
</button>
</div>}
</div>
<div className="bg-gray-100 sticky top-0">
<div
className="border rounded-lg mx-auto max-w-3xl mt-4 p-5 bg-white ">
<div className="">
<div className="flex w-full items-end">
<StudentsEditor__Search
filter={state.filter}
updateFilterCB={updateFilter(send)}
tags={state.tags}
levels
/>
<div className="ml-2 flex-shrink-0">
<label className="block text-tiny uppercase font-semibold">
{"Sort by:" |> str}
</label>
<div className="mt-1">
{<Dropdown
selected={dropDownSelected(state.filter)}
contents={dropDownContents(
updateFilter(send),
state.filter,
)}
/>}
</div>
)
|> React.array}
</div>
</div>
<div className="flex flex-wrap">
{state.selectedStudents
|> Array.map(selectedStudent =>
<div
className="flex items-center bg-white border border-gray-300 px-2 py-1 mr-1 rounded-lg mt-2">
{switch (selectedStudent |> SelectedStudent.avatarUrl) {
| Some(avatarUrl) =>
<img
className="w-5 h-5 rounded-full mr-2 object-cover"
src=avatarUrl
/>
| None =>
<Avatar
name={selectedStudent |> SelectedStudent.name}
className="w-5 h-5 mr-2"
/>
}}
<div className="text-sm">
<span
className="text-black font-semibold inline-block ">
{selectedStudent |> SelectedStudent.name |> str}
</span>
<button
className="ml-2 hover:bg-gray-300 cursor-pointer"
onClick={_ =>
deselectStudent(
send,
selectedStudent |> SelectedStudent.id,
)
}>
<i className="fas fa-times" />
</button>
</div>
</div>
)
|> React.array}
</div>
</div>
</div>
</div>
</div>
<div>
{state.selectedStudents |> ArrayUtils.isEmpty
? React.null
: <div className="px-6">
@@ -305,23 +330,23 @@ let make = (~courseId, ~courseCoachIds, ~schoolCoaches, ~levels, ~studentTags) =
</div>
</div>
</div>}
</div>
<div className="overflow-y-scroll">
<StudentsEditor__TeamsList
levels
courseId
filter={state.filter}
pagedTeams={state.pagedTeams}
selectedStudentIds={
state.selectedStudents |> Array.map(s => s |> SelectedStudent.id)
}
selectStudentCB={selectStudent(send)}
deselectStudentCB={deselectStudent(send)}
showEditFormCB={showEditForm(send)}
updateTeamsCB={updateTeams(send)}
loading={state.loading}
setLoadingCB={setLoading(send)}
/>
<div>
<StudentsEditor__TeamsList
levels
courseId
filter={state.filter}
pagedTeams={state.pagedTeams}
selectedStudentIds={
state.selectedStudents |> Array.map(s => s |> SelectedStudent.id)
}
selectStudentCB={selectStudent(send)}
deselectStudentCB={deselectStudent(send)}
showEditFormCB={showEditForm(send)}
updateTeamsCB={updateTeams(send)}
loading={state.loading}
setLoadingCB={setLoading(send)}
/>
</div>
</div>
<LoadingSpinner loading={state.loading} />
</div>;
@@ -219,32 +219,35 @@ let make = (~filter, ~updateFilterCB, ~tags, ~levels) => {
handleRemoveFilter(filter, updateFilterCB),
);

<div className="w-full">
<div className="flex justify-between">
<div> {selectedFilters |> React.array} </div>
{selectedFilters |> ArrayUtils.isEmpty
? React.null
: <button
className="btn btn-danger ml-2 px-4"
onClick={_ => clearFilter(setSearchInput, updateFilterCB)}>
{"Clear" |> str}
</button>}
</div>
<div className="flex ">
<div className="w-full relative">
<div className="flex flex-col">
<label className="block text-tiny uppercase font-semibold">
{"Filter by:" |> str}
</label>
<div className="flex items-center">
<div> {selectedFilters |> React.array} </div>
{selectedFilters |> ArrayUtils.isEmpty
? React.null
: <button
className="btn btn-danger btn-small ml-2 px-4"
onClick={_ => clearFilter(setSearchInput, updateFilterCB)}>
{"Clear" |> str}
</button>}
</div>
<input
autoComplete="off"
value=searchInput
onChange={handleOnchange(setSearchInput)}
className="appearance-none block bg-white leading-snug border border-gray-400 rounded-lg w-full py-3 px-4 mt-2 focus:outline-none focus:bg-white focus:border-gray-500"
className="appearance-none block bg-white border border-gray-400 rounded w-full py-2 px-4 mt-1 focus:outline-none focus:bg-white focus:border-gray-500"
id="search"
type_="text"
placeholder="Search"
placeholder="Search for name, tag or level"
/>
</div>
<div />
{if (searchInput |> String.trim != "") {
<div
className="border border-gray-400 bg-white mt-1 rounded-lg shadow-lg relative px-4 pt-2 pb-3">
className="w-full absolute border border-gray-400 bg-white mt-1 rounded-lg shadow-lg px-4 pt-2 pb-3">
{searchResult(
searchInput,
applyFilter(filter, setSearchInput, updateFilterCB),
@@ -99,7 +99,7 @@ let make =
<input
value=state
onChange={event => send(ReactEvent.Form.target(event)##value)}
className="appearance-none block bg-white leading-snug border border-gray-400 rounded-lg w-full py-3 px-4 mt-2 focus:outline-none focus:bg-white focus:border-gray-500"
className="appearance-none block bg-white leading-snug border border-gray-400 rounded w-full py-3 px-4 mt-2 focus:outline-none focus:bg-white focus:border-gray-500"
id="tags"
type_="text"
placeholder={
@@ -128,7 +128,7 @@ let teamCard =
<div
key=teamId
id={team |> Team.name}
className="student-team-container flex items-strecth shadow bg-white rounded-lg mb-4 overflow-hidden">
className="student-team-container flex items-strecth shadow bg-white rounded-lg mt-3 overflow-hidden">
<div className="flex flex-col flex-1 w-3/5">
{team
|> Team.students
@@ -144,7 +144,7 @@ let teamCard =
<div className="flex flex-1 w-3/5 h-full">
<div className="flex items-center w-full">
<label
className="flex items-center h-full border-r text-gray-500 leading-tight font-bold px-4 py-5 hover:bg-gray-100"
className="flex items-center h-full text-gray-500 leading-tight font-bold px-4 py-5 hover:bg-gray-100"
htmlFor=checkboxId>
<input
className="leading-tight"
@@ -258,9 +258,9 @@ let make =
[|pagedTeams|],
);

<div className="pb-6 px-6">
<div className="pb-6">
<div className="max-w-3xl mx-auto w-full">
<div className="w-full pt-4 rounded-b-lg">
<div className="w-full pt-2">
<div className="max-w-3xl mx-auto" />
{switch ((pagedTeams: Page.t)) {
| Unloaded =>
@@ -59,16 +59,16 @@ let sortByListForDropdown = t =>

let sortByTitle = sortBy => {
switch (sortBy) {
| Name => "name"
| CreatedAt => "last created"
| UpdatedAt => "last updated"
| Name => "Name"
| CreatedAt => "Last Created"
| UpdatedAt => "Last Updated"
};
};

let sortByIcon = sortBy => {
switch (sortBy) {
| Name => "fas fa-user"
| CreatedAt => "fas fa-user"
| UpdatedAt => "fas fa-user"
| Name => "fas fa-user text-gray-800"
| CreatedAt => "fas fa-user text-gray-800"
| UpdatedAt => "fas fa-user text-gray-800"
};
};
@@ -95,6 +95,9 @@ module.exports = {
'5': '5px',
'6': '6px',
},
fontSize: {
'tiny': '.625rem',
},
screens: {
'2xl': '1824px',
// => @media (min-width: 1824px) { ... }

0 comments on commit bde7d73

Please sign in to comment.
You can’t perform that action at this time.