Overleaf/services/web/app/views/project/list/project-list.jade

.row
	.col-xs-12
		form.project-search.form-horizontal(role="form")
			.form-group.has-feedback.has-feedback-left.col-md-7.col-xs-12
				input.form-control.col-md-7.col-xs-12(
					placeholder="#{translate('search_projects')}…",
					autofocus='autofocus',
					ng-model="searchText",
					focus-on='search:clear',
					ng-keyup="searchProjects()"
				)
				i.fa.fa-search.form-control-feedback-left
				i.fa.fa-times.form-control-feedback(
					ng-click="clearSearchText()",
					style="cursor: pointer;",
					ng-show="searchText.length > 0"
				)
			//- i.fa.fa-remove

		.project-tools(ng-cloak)
			.btn-toolbar(ng-show="filter != 'archived'")
				.btn-group(ng-hide="selectedProjects.length < 1")
					a.btn.btn-default(
						href='#',
						tooltip="#{translate('download')}",
						tooltip-placement="bottom",
						tooltip-append-to-body="true",
						ng-click="downloadSelectedProjects()"
					)
						i.fa.fa-cloud-download
					a.btn.btn-default(
						href='#',
						tooltip="#{translate('delete')}",
						tooltip-placement="bottom",
						tooltip-append-to-body="true",
						ng-click="openArchiveProjectsModal()"
					)
						i.fa.fa-trash-o

				.btn-group.dropdown(ng-hide="selectedProjects.length < 1")
					a.btn.btn-default.dropdown-toggle(
						href="#",
						data-toggle="dropdown",
						tooltip="#{translate('add_to_folders')}",
						tooltip-append-to-body="true",
						tooltip-placement="bottom"
					)
						i.fa.fa-folder-open-o
						|  
						span.caret
					ul.dropdown-menu.dropdown-menu-right.js-tags-dropdown-menu(
						role="menu"
						ng-controller="TagListController"
					)
						li.dropdown-header #{translate("add_to_folder")}
						li(
							ng-repeat="tag in tags | filter:nonEmpty | orderBy:'name'",
							ng-controller="TagDropdownItemController"
						)
							a(href="#", ng-click="addOrRemoveProjectsFromTag()", stop-propagation="click")
								i.fa(
									ng-class="{\
										'fa-check-square-o': areSelectedProjectsInTag == true,\
										'fa-square-o': areSelectedProjectsInTag == false,\
										'fa-minus-square-o': areSelectedProjectsInTag == 'partial'\
									}"
								)
								|  {{tag.name}}
						li.divider
						li
							a(href="#", ng-click="openNewTagModal()", stop-propagation="click") #{translate("create_new_folder")}

				.btn-group(ng-hide="selectedProjects.length != 1").dropdown
					a.btn.btn-default.dropdown-toggle(
						href='#',
						data-toggle="dropdown"
					) #{translate("more")}
						span.caret
					ul.dropdown-menu.dropdown-menu-right(role="menu")
						li(ng-show="getFirstSelectedProject().accessLevel == 'owner'")
							a(
								href='#',
								ng-click="openRenameProjectModal()"
							) #{translate("rename")}
						li
							a(
								href='#',
								ng-click="openCloneProjectModal()"
							) #{translate("make_copy")}

			.btn-toolbar(ng-show="filter == 'archived'")
				.btn-group(ng-hide="selectedProjects.length < 1")
					a.btn.btn-default(
						href='#',
						data-original-title="Restore",
						data-toggle="tooltip",
						data-placement="bottom",
						ng-click="restoreSelectedProjects()"
					) #{translate("restore")}

				.btn-group(ng-hide="selectedProjects.length < 1")
					a.btn.btn-danger(
						href='#',
						data-original-title="Delete Forever",
						data-toggle="tooltip",
						data-placement="bottom",
						ng-click="openDeleteProjectsModal()"
					) #{translate("delete_forever")}

.row.row-spaced
	.col-xs-12
		.card.card-thin.project-list-card
			ul.list-unstyled.project-list.structured-list(
				select-all-list,
				ng-if="projects.length > 0",
				max-height="projectListHeight - 25",
				ng-cloak
			)
				li.container-fluid
					.row
						.col-xs-6
							input.select-all(
								select-all,
								type="checkbox"
							)
							span.header.clickable(ng-click="changePredicate('name')") #{translate("title")}
								i.tablesort.fa(ng-class="getSortIconClass('name')")
						.col-xs-2
							span.header.clickable(ng-click="changePredicate('accessLevel')") #{translate("owner")}
								i.tablesort.fa(ng-class="getSortIconClass('accessLevel')")
						.col-xs-4
							span.header.clickable(ng-click="changePredicate('lastUpdated')") #{translate("last_modified")}
								i.tablesort.fa(ng-class="getSortIconClass('lastUpdated')")
				li.project_entry.container-fluid(
					ng-repeat="project in visibleProjects | orderBy:predicate:reverse",
					ng-controller="ProjectListItemController"
				)
					.row
						.col-xs-6
							input.select-item(
								select-individual,
								type="checkbox",
								ng-model="project.selected"
							)
							span
								a.projectName(href="/project/{{project.id}}") {{project.name}}
								span(
									ng-controller="TagListController"
								)
									a.label.label-default.tag-label(
										href,
										ng-repeat='tag in project.tags',
										ng-click="selectTag(tag)"
									) {{tag.name}}
						.col-xs-2
							span.owner {{ownerName()}}
						.col-xs-4
							span.last-modified {{project.lastUpdated | formatDate}}
				li(
					ng-if="visibleProjects.length == 0",
					ng-cloak
				)
					.row
						.col-xs-12.text-centered
							small #{translate("no_projects")}
			div.welcome.text-centered(ng-if="projects.length == 0", ng-cloak)
				h2 #{translate("welcome_to_sl")}
				p #{translate("new_to_latex_look_at")} 
					a(href="/templates") #{translate("templates").toLowerCase()}
					|   #{translate("or")}
					a(href="/learn")  #{translate("latex_help_guide")}
					| ,
					br 
					|  #{translate("or_create_project_left")}