Commit a9340549 authored by narendraR's avatar narendraR Committed by Tim Plunkett
Browse files

Issue #3284325 by narendraR, bnjmnm: Consider merging Project & ProjectLIstView into one component

parent e4f40521

sveltejs/public/build/bundle.css

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/public/build/bundle.js.map

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

sveltejs/src/Project/Project.svelte

+76 −12
Original line number Diff line number Diff line 
<script>

  // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export

  export let project;

  export let toggleView;

  import ActionButton from './ActionButton.svelte';

  import Image from './Image.svelte';

  import Categories from './Categories.svelte';

  import SecurityCoverage from './SecurityCoverage.svelte';

  import MaintainedIcon from './MaintainedIcon.svelte';



  const { drupalSettings } = window;

</script>



<li class="project">

<li class="project {toggleView.toLowerCase()}">

  <div class="top">

    <Image fieldProjectImages={project.field_project_images} />

  </div>
@@ -23,12 +26,28 @@ 
        >

      </h3>

      <div class="body">{@html project.body.summary}</div>

      {#if toggleView === 'Grid'}

        <Categories fieldModuleCategories={project.field_module_categories} />

      {/if}

    </div>

  </div>

  <div class="icons">

    <SecurityCoverage coverage={project.field_security_advisory_coverage} />

    <MaintainedIcon maintained={project.field_maintenance_status.name} />

    {#if toggleView === 'List'}

      <div class="container">

        <div class="image">

          <img

            src="{drupalSettings.project_browser.origin_url}/{drupalSettings

              .project_browser.module_path}/images/project-usage-icon.svg"

            alt="Project Usage"

          />

        </div>

        <div class="text">

          {project.project_usage_total.toLocaleString()} Active Installs

        </div>

      </div>

    {/if}

    <ActionButton {project} />

  </div>

</li>
@@ -36,34 +55,45 @@ 
<style>

  /* Small devices (portrait tablets and large phones, 600px and up) */

  @media only screen and (min-width: 53.75rem) {

    .top {

    .grid .top {

      overflow: hidden;

      display: flex;

      align-items: center;

    }

    .list.project {

      padding: 0 2rem;

    }

    .list .top {

      padding: 10px;

      width: 10%;

    }

  }



  /*One column card view */

  @media screen and (max-width: 75rem) {

    .project {

    .grid.project {

      width: 100%;

    }

  }



  /*Two column card view (laptops/desktops, 1200px and up) */

  @media only screen and (min-width: 75rem) {

    .project {

    .grid.project {

      width: 49%;

    }

    .list.project {

      width: 100%;

      padding: 0 2rem;

    }

  }



  @media only screen and (min-width: 87.5rem) {

    .project {

    .grid.project {

      width: 32%;

    }

  }



  .project {

  .grid.project {

    display: flex;

    flex-direction: column;

    border: 1px solid black;
@@ -73,18 +103,20 @@ 
    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);

    margin-right: 0.5vw;

  }

  h3 {



  .grid h3 {

    margin-top: 0.25em;

    text-align: center;

  }



  h3 a {

    text-decoration: none;

    color: black;

  }

  .main {



  .grid .main {

    display: flex;

    background: white;

    /*min-height: 275px;*/

    position: relative;

    padding: 1em 1em;

    flex-direction: column;
@@ -96,14 +128,46 @@ 
    }

  }



  .body {

  .grid .body {

    text-align: center;

    font-size: 15px;

  }



  .icons {

  .grid .icons {

    display: flex;

    margin-top: auto;

    padding: 1em 1em;

  }

  .body {

    font-size: 15px;

  }



  .list .image {

    padding-left: 4em;

  }



  .list .image img {

    max-width: 100%;

    width: 3em;

  }

  .list .main {

    width: 100%;

  }

  .list h3 {

    padding-top: 10px;

  }

  .list.project {

    margin-bottom: 2em;

    background: #ffffff;

    border: 0.5px solid #a4a2a2;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

  }

  .list .icons {

    display: flex;

    padding: 1em 1em 1em 0;

  }

  .container {

    display: flex;

    align-items: center;

    justify-content: center;

  }

</style>

sveltejs/src/Project/ProjectListView.svelte

deleted100644 → 0
+0 −109
Original line number Diff line number Diff line 
<script>

  // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export

  export let project;

  import ActionButton from './ActionButton.svelte';

  import Image from './Image.svelte';

  import SecurityCoverage from './SecurityCoverage.svelte';

  import MaintainedIcon from './MaintainedIcon.svelte';



  const { drupalSettings } = window;

</script>



<li class="project">

  <div class="left">

    <Image fieldProjectImages={project.field_project_images} />

  </div>

  <div class="main">

    <div class="middle">

      <h3>

        <a href={project.url} target="_blank" rel="noreferrer"

          >{project.title}</a

        >

      </h3>

      <div class="body">{@html project.body.summary}</div>

    </div>

    <div class="icons">

      <SecurityCoverage coverage={project.field_security_advisory_coverage} />

      <MaintainedIcon maintained={project.field_maintenance_status.name} />

      <div class="container">

        <div class="image">

          <img

            src="{drupalSettings.project_browser.origin_url}/{drupalSettings

              .project_browser.module_path}/images/project-usage-icon.svg"

            alt="Project Usage"

          />

        </div>

        <div class="text">

          {project.project_usage_total.toLocaleString()} Active Installs

        </div>

      </div>

      <ActionButton {project} />

    </div>

  </div>

</li>



<style>

  /* Small devices (portrait tablets and large phones, 600px and up) */

  @media only screen and (min-width: 600px) {

    .project {

      padding: 0 2rem;

    }

    .left {

      padding: 10px;

      width: 10%;

    }

  }



  /* Large devices (laptops/desktops, 992px and up) */

  @media only screen and (min-width: 992px) {

    .project {

      width: 100%;

      padding: 0 2rem;

    }

  }



  .project {

    margin-bottom: 2em;

    background: #ffffff;

    border: 0.5px solid #a4a2a2;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

  }

  h3 {

    padding-top: 10px;

  }

  h3 a {

    text-decoration: none;

    color: black;

  }

  .main {

    width: 100%;

  }



  @media only screen and (max-width: 1450px) {

    .main {

      padding-bottom: 60px;

    }

  }



  .body {

    font-size: 15px;

  }



  .icons {

    display: flex;

    padding: 1em 1em 1em 0;

  }



  .container {

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .image img {

    max-width: 100%;

    width: 3em;

  }

  .image {

    padding-left: 4em;

  }

</style>